React 路由架构

安装 路由

npm install react-router-dom localforage match-sorter sort-by -S

# 如果是ts项目 下面的需要安装

npm i --save-dev @types/sort-by

路由目录

src
├── main.jsx
├── App.jsx
├── routes
│   ├── router.jsx
│   ├── modules
│       ├── common.jsx
│       ├── other.jsx

新建页面

• 先去views 下面新建 home, login, error 页面

common.jsx

import HomePage from "@/views/home";
import LoginPage from "@/views/login";
import ErrorPage from "@/views/error";
import { Navigate } from "react-router-dom";

const commonRoutes = [
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "*",
    element: <Navigate to="/404" />,
  },
  {
    path: "/404",
    element: <ErrorPage />,
  },
];

export default commonRoutes;

router.jsx

import commonRoutes from "./modules/common";

import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  // 2. 基础配置
  ...commonRoutes,
]);

export default router;

main.jsx

import { createRoot } from 'react-dom/client';
import App from './App.tsx';
createRoot(document.getElementById('root')!).render(<App />);

App.jsx

import { RouterProvider } from "react-router-dom";
import router from "@/router/routers";

export default function App() {
  return <RouterProvider router={router} />;
}