直接上干活
微信扫码体验一下 （说不定哪天你就用得上）
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组件
到这里路由就完成了 子路由 和其他路由 根据需求自行增加即可
