react 项目路由配置（react-router-dom 版本 v6.3、v6.4）

根据 react-router-dom 的版本，有不同的方式

一、react-router-dom `v6.3`

用到的主要 api:

BrowserRouter
useRoutes
Outlet

下面是详细步骤：

1、index.js

BrowserRouter 用来实现 单页的客户端路由
使用 BrowserRouter 包裹 App
放在 顶级 位置，重要！！
支持嵌套路由，用于 history 模式
hash 模式使用 HashRouter

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<BrowserRouter><React.StrictMode><App /></React.StrictMode></BrowserRouter>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

如果遇到下图这种报错，就是没有将 BrowserRouter 像上图一样放在 顶级，一定要放顶级！

在这里插入图片描述

2、routes.js

用数组描述路由，包含必要参数 path 、element 、children

例如：

import { UserOutlined } from "@ant-design/icons";
import Abroad from "./pages/Abroad";
import Domestic from "./pages/Domestic";
import Layout from "./layout/index";
import { Navigate } from "react-router-dom";const routes = [{title: "平台管理",path: "/manage",element: <Layout />,icon: <UserOutlined />,children: [{title: "境内平台管理",path: "/manage/domestic",element: <Domestic />,icon: <UserOutlined />,},{title: "境外平台管理",path: "/manage/abroad",element: <Abroad />,icon: <UserOutlined />,},],},{path: "/",element: <Navigate to="/manage/domestic" />,},
];export default routes;

3、App.js

使用 useRoutes 渲染出一级路由，参数即为我们在上一步的路由数组

useRoutes 是 react-router-dom 库中提供的一个 Hook，用于 基于路由配置生成路由匹配器（Router Matcher）的方法
useRoutes 接收的路由配置对象应该是一个由 若干个路由配置组成的数组，每个路由配置包含以下属性：
- path：字符串类型，表示 URL 路径匹配规则；
- element：React 组件，表示如果 URL 匹配成功后要显示的组件；
- children：嵌套子路由的路由配置数组。

import React from "react";
import { useRoutes } from "react-router-dom";
import routes from "./routes";const App = () => {const element = useRoutes(routes);return <>{element}</>;
};export default App;

4、layout.jsx

实际场景，如后台管理项目，需要展示多级路由，我们一般会创建一个layout文件

按照 左 Menu，右 Content 的设定来举例
嵌套的二级路由，使用 outlet 渲染（类似于vue中的 <router-view>）
例子中，包含了一些菜单处理的代码，如递归渲染、默认选中，可选择性观看

import React, { useState } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Layout, Menu, Button, theme } from "antd";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import routes from "../routes/index";const { Header, Sider, Content } = Layout;// Menu格式处理
function getMenu(rout) {const rs = rout.map((item) => {return {label: item.title,key: item.path,icon: item.icon,children: item.children && getMenu(item.children),};});return rs;
}// 递归层级
function findParents(key, tree) {let parents = [];function findParent(nodes, key) {for (let node of nodes) {if (node.path === key) {return true;}if (node.children && findParent(node.children, key)) {parents.push(node.path);return true;}}return false;}findParent(tree, key);parents.push(key);return parents;
}// 获取当前路由所在层级
function getOpenKeys(pathname, list) {if (!pathname) return ["/manage", "/manage/domestic"];let keys = findParents(pathname, list);return keys;
}const App = () => {const [collapsed, setCollapsed] = useState(false);const {token: { colorBgContainer, borderRadiusLG },} = theme.useToken();// 递归获取有效菜单项const list = routes.filter((item) => item.title);const items = getMenu(list);// 菜单，默认展开、选中处理const location = useLocation();const keys = getOpenKeys(location.pathname, list);const defaultSelectedKeys = keys;const defaultOpenKeys = keys;// 跳转let navigate = useNavigate();function handleClick(e) {navigate(e.key);}return (<Layout><Sider trigger={null} collapsible collapsed={collapsed}><div style={{ width: "100%", height: "80px" }}></div>{/* 菜单 */}<Menumode="inline"theme="dark"defaultSelectedKeys={defaultSelectedKeys}defaultOpenKeys={defaultOpenKeys}onClick={handleClick}items={items}></Menu></Sider><Layout><Headerstyle={{padding: 0,background: colorBgContainer,}}><Buttontype="text"onClick={() => setCollapsed(!collapsed)}style={{ marginBottom: 16 }}>{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</Button></Header><Contentstyle={{margin: "24px 16px",padding: 24,minHeight: 280,background: colorBgContainer,borderRadius: borderRadiusLG,overflowY: "auto",}}>{/* 二级路由 */}<Outlet /></Content></Layout></Layout>);
};
export default App;

v6.3 的版本，路由设置到此结束，接下来是 v6.4

二、react-router-dom `v6.4`

主要 api：

createBrowserRouter
RouterProvider
Outlet

在 v6.3 方案的基础上，换掉 index.js 和 App.js 即可

1、index.js

把 BrowserRouter 的使用去掉


import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";// v6.3 使用此API，v6.4使用会报错
// import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(// <BrowserRouter><React.StrictMode><App /></React.StrictMode>// </BrowserRouter>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2、App.js

把 useRoutes 的使用去掉，增加 createBrowserRouter、RouterProvider 的相关设置

createBrowserRouter 创建路由
挂载到 RouterProvider 的 router 上


import React from "react";
import routes from "./routes";// v6.3 userRoutes钩子
// import { useRoutes } from "react-router-dom";
// const App = () => {
//   const element = useRoutes(routes);
//   return <>{element}</>;
// };// v6.4 createBrowserRouter + RouterProvider
import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter(routes);
const App = () => {return (<><RouterProvider router={router} /></>);
};export default App;