直接上干活

微信扫码体验一下 （说不定哪天你就用得上）

1.使用create-react-app创建项目

$ npx create-react-app antd-demo
后我们进入项目并启动
$ cd antd-demo
$ npm run start

这是 create-react-app 生成的默认目录结构。
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ └── logo.svg
└── yarn.lock

2.安装路由 react-router-dom

npm install react-router-dom --save //最新版本6.23.0

3.首先改造一下页面路由

在根目录中index.js 中能看到

所以我们可以在app.js中引入 RouterProvider 路由管理
首先我们在根目录创建 pages/main.js pages/home router / index.js 文件

4.在main.js 中使用Outlet 来引导子路由显示

现象

createBrowserRouter 参考官方文档
5. router / index.js

import {createBrowserRouter ,Navigate } from "react-router-dom"
import Main from "../pages/main"
import Home from "../components/home"
const router=[
    {
        path:'/',
        Component:Main,
        children:[
            // /重定向
            {
                path:'/',
                element :<Navigate to="home" replace></Navigate>
            },
            {
                path:'home',
                Component:Home
            }
        ]
    },
]
export default createBrowserRouter(router)

6. 最后在app.js中

7.在home页面 使用antd的 Layout组件

到这里路由就完成了 子路由 和其他路由 根据需求自行增加即可