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://m.elefans.com/dongtai/1729175073a1188610.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论