前言
上文已经搭建并简化好了脚手架，本文我们用react-router-dom库和它提供的useRoutes hook来进行基本的路由配置。
基本路由配置
安装路由库
npm install react-router-dom
配置入口文件
index.js入口文件中使用BrowserRouter或HashRouter标签包裹根组件App，这里我们使用BrowserRouter
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import './index.scss'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
)
1.
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.url呈现形式不同
BrowserRouter`的路径中没有#,例如：`localhost:3000/demo/test HashRouter`的路径包含#,例如：`localhost:3000/#/demo/test3.刷新后
HashRouter会导致路由state参数的丢失，而BrowserRouter不会（因为state对象存放在history对象中）
配置路由表
src下新建文件router/index.js里面用来存放路由表（类型为数组，格式为{path:路由路径,element:路由组件}）
import Home from '@/pages/Home/Home'
import { Navigate } from 'react-router-dom'
const routes = [
// 访问/时重定向到/home
{
path: '/',
element: <Navigate to="/home" replace />
},
{
path: 'home',
element: <Home />
}
]
export default routes
编写页面
src下新建pages/Home/index.jsx存放路由文件（这里除了这种命名方式还有pages/Home/Home.jsx，具体看项目要求或个人喜好）
src/pages/Home/Home.jsx
import React from 'react'
const Home = () => {
return <div>Home</div>
}
export default Home
改造根组件
在根组件App.jsx中用useRouteshook包裹第二步的路由表（可以动态创建Routes和Route标签）
App.jsx
import React from 'react'
import { useRoutes } from 'react-router-dom'
import routes from '@/router'
const App = () => {
const element = useRoutes(routes)
return <div>{element}</div>
}
export default App
然后我们在终端输入npm start启动项目跳转首页显示Home字样即配置成功
嵌套路由配置
前端静态的路由配置已经能够完成了，我们可以通过在router/index.js增加自己所需要的路由并添加对应的页面来实现。
但对于后台管理系统而言，通常会在根组件App和路由组件中间添加一个Layout组件用来布局侧边栏、头部导航、内容区域等。我们这里简单用上导航下内容区域实现一下。
添加布局组件Layout
首要的当然是先配置路由表。这里我们默认进来展示的组件就要是Layout组件，但是我们又想重定向到首页Home组件，也就是访问"/"时我们直接转到"/home"就可以使用{ index: true, element: <Navigate to="/home" replace /> }配置索引路由
索引路由可以被认为是“默认子路由”。当父路由有多个子路由，但 URL 仅在父路由的路径上时，您可能需要将某些内容呈现到 outlet 中。
src/router/index.js
...
const routes = [
// 访问/时重定向到/home
{
path: '/',
element: <Layout />,
children: [
{ index: true, element: <Navigate to="/home" replace /> },
{ path: 'home', element: <Home /> },
]
}
]
...
随后编写页面Layout（注意，Layout不是路由组件，我们在src下新建一个Layout目录来编写页面）
src/Layout/index.jsx
import React from 'react'
import { Link, Outlet } from 'react-router-dom'
const Layout = () => {
return (
<div>
<div style={{ marginBottom: 20 }}>
Layout的头部导航：
<Link to="/home" style={{ marginRight: 20 }}>
首页
</Link>
</div>
Layout的内容区域
<Outlet />
</div>
)
}
export default Layout
我们启动项目就可以看到如下的效果。我们可以看到路径不为'/'而为'/home'说明通过索引路由重定向到了Home组件
添加嵌套路由
接下来我们就来添加嵌套路由，比如我有一个二级菜单目录叫系统管理，里面嵌套有用户管理、角色管理、权限管理的菜单，而且当我访问系统管理的路径时要重定向到用户管理。我们可以用上面的做法来实现。
src/router/index.jsx
...
const routes = [
// 访问/时重定向到/home
{
path: '/',
element: <Layout />,
children: [
{ index: true, element: <Navigate to="/home" replace /> },
{ path: 'home', element: <Home /> },
{
path: 'system',
element: <System />,
children: [
{ index: true, element: <Navigate to="/system/user" replace /> },
{ path: 'user', element: <User /> },
{ path: 'role', element: <Role /> },
{ path: 'auth', element: <Auth /> }
]
}
]
}
]
...
src/pages/System/index.jsx
import React from 'react'
import { Link, Outlet } from 'react-router-dom'
const System = () => {
return (
<div>
<div>
System的头部导航：
<Link to="/system/user" style={{ marginRight: 20 }}>
用户管理
</Link>
<Link to="/system/role" style={{ marginRight: 20 }}>
角色管理
</Link>
<Link to="/system/auth">权限管理</Link>
</div>
System的内容区域：
<Outlet />
</div>
)
}
export default System
然后Layout头部导航区添加一句<Link to="/system">系统管理</Link>。系统管理的子组件用户管理等就不再贴出代码了，就是简单标识一下组件。
我们来看一下效果。点击系统管理直接跳到用户管理。再点击导航链接回到首页也没什么问题。嵌套路由的配置工作就算是完成了
代码
上述实现的代码都放在react-antd5-admin，大家可自行查阅
