- 2022-02-22 更新:
重构代码组织,插件化处理(传送门)
实现的功能:
- 全局路由统一管理,支持便捷配置路由重定向、路由懒加载、自定义meta字段等。
- 全局路由拦截,支持读取路由meta配置,支持拦截跳转其他路由等。
- 同时也支持嵌套路由、动态路由参数等官方路由原生支持的配置方式。
下面分享具体方案。
一、react-router v6
"react": "^17.0.2",
"react-router-dom": "^6.2.1",
"prop-types": "^15.8.1",
v6版本目前网上的文章寥寥无几,实现过程基本靠自己摸索。
- 官方文档:https://github.com/remix-run/react-router/blob/main/docs/api.md
- 目前官方文档只有英文版,升级指南啥的网上能搜到中文的文章。
- 这里只提一下新增的一个api:
useRoutes
。
useRoutes
可以读取一个路由配置数组,生成相应的路由组件列表,类似以前的react-router-config
插件的功能,那么路由统一管理的实现用这个api就简单多了。
二、路由统一管理
实现的就是路由集中在一个文件里通过数组统一管理配置。
(这里仅介绍路由统一管理的配置方式示例,非完整代码)
1、路由配置文件
项目src/router/index.js
里填写路由配置:
import Index from '@/views/index/index'
import Login from '@/views/login/index'
import Page404 from '@/views/test/page404'
const routes = [
{
path: '/index',
element: <Index />,
},
{
path: '/login',
element: <Login />,
},
{
path: '*',
element: <Page404 />,
},
]
export {
routes
}
- 这里仅作为路由统一管理配置的参考,后面配置路由拦截时会做修改。
2、引入路由
引用路由并渲染的核心是利用react-router v6 的官方api:useRoutes
。
(1)项目入口文件src/index.js
里引入router组件:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
)
- 路由 browser / history 模式使用
BrowserRouter</