admin管理员组文章数量:1633739
- 2022-02-18 更新：
添加路由拦截异步处理的支持，通过拦截函数返回一个promise对象的形式使用。 - 2022-02-11 更新：
优化路由拦截函数的使用，避免循环引用的隐患。 - 2022-01-13 更新：
重构路由配置列表的配置方式，配置更加简便，且便于后台管理系统的项目根据路由配置自动生成导航菜单。
实现的功能：
- 全局路由统一管理，支持便捷配置路由重定向、路由懒加载、自定义meta字段等。
- 全局路由拦截，支持读取路由meta配置，支持拦截跳转其他路由等。
- 同时也支持嵌套路由、动态路由参数等官方路由原生支持的配置方式。
下面分享具体方案。
一、react-router v6
"react": "^17.0.2",
"react-router-dom": "^6.2.1"
v6版本目前网上的文章寥寥无几，实现过程基本靠自己摸索。
- 官方文档：https://github/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版权声明：本文标题：react-router v6 路由统一管理及路由拦截方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729175073a1188610.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论