路由封装

1. 创建文件 src\router\router.tsx

import { Navigate, useRoutes, RouteObject } from "react-router-dom";

import Login from "../pages/Login/Login";
import User from "../pages/User/User";
import Home from "../pages/Home/Home";
import Layout from "../pages/Layout/Layout";

const GetRouters = () => {
  const routes: RouteObject[] = useRoutes([
    {
      path: "/",
      element: <Navigate to="/layout/home" />,
    },
    {
      path: "/layout",
      element: <Layout />,
      children: [
        {
          path: "user",
          element: <User />,
          index: true,
        },
        {
          path: "home",
          element: <Home />,
        },
      ],
    },
  ]);

  return routes;
};

export default GetRouters;

2. App.tsx 中引入

import React from "react";
import GetRouters from "./router/router";

const App = () => {
  return (
    <div>
      <GetRouters />
    </div>
  );
};

export default App;