react项目中createBrowserRouter的使用

react-router-dom官网：https://reactrouter.com/en/main

首先，安装react-router-dom（创建项目时并不会安装这个，需要手动安装）

npm install react-router-dom

 为了方便全局配置，在src目录项新建一个router文件夹，文件夹里新建index.js

// router/index.js
import HomePage from "../views/HomePage";  // 首页
import CulturePage from "../views/CulturePage";  // 饮食文化
import ManagePage from "../views/ManagePage";  // 美食管理
import InfoPage from "../views/InfoPage";  // 美食详情页
import AddFood from "../views/manage/AddFood";  // 美食管理 - 添加美食
import FoodManage from "../views/manage/FoodManage";  // 美食管理 - 美食管理
import MyProfile from "../views/manage/MyProfile";  // 美食管理 - 个人信息
import RootPage from "../views/RootPage";

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

const router = createBrowserRouter([
  {
    path: "/gxt/*",
    element: <RootPage />,
    children: [
      {
        path: "home",
        element: <HomePage />,
        index: true
      },
      {
        path: "culture",
        element: <CulturePage></CulturePage>
      },
      {
        path: "info",
        element: <InfoPage></InfoPage>
      },
      {
        path: "manage/*",
        element: <ManagePage></ManagePage>,
        children: [
          {
            path: "profile",
            element: <MyProfile></MyProfile>
          },
          {
            path: "foodManage",
            element: <FoodManage></FoodManage>
          },
          {
            path: "addFood",
            element: <AddFood></AddFood>
          }
        ]
      }
    ]
  }
], {basename: "/"})

export default router

注意，如果有children，也就是子路由，path的末尾需要加上"/*" ，子路由开头不需要加斜杠

App.js

// 只展示部分代码
import './App.css';
import {RouterProvider} from "react-router-dom";
import router from "./router";

function App() {
  return (
    <div className="App">
      <RouterProvider router={router}>
      </RouterProvider>
    </div>
  );
}

export default App;

RootPage.js

// 只展示部分代码
// 需要显示子路由组件的地方加上<Outlet />就行
// 更深的嵌套路由以此类推
import './../App.css';
import {Outlet} from "react-router-dom";

function RootPage() {

  return (
    <div className="App">
      <Outlet />
    </div>
  );
}
export default RootPage;