1.0.8 • Published 2 years ago
react-router-fish v1.0.8
react-router-fish
react-router v6 路由统一管理方案。
1、安装
npm i react-router-fish -S
2、使用
// 在项目入口文件index.js(或入口组件App.js里引入)
import { HashRouter } from "react-router-dom";
import EasyRouter from "react-router-fish"; // 引入EasyRouter组件
import routes from "./routes"; // 引入你的路由配置
import beforeRouteEnter from "./beforeRouteEnter"; // 引入你定义的前置路由守卫函数
function App() {
return (
<HashRouter>
<EasyRouter routes={routes} beforeRouteEnter={beforeRouteEnter} />
</HashRouter>
);
}
export default App;
3、配置路由列表
const routes = [
{
path: '/',
redirect: '/login', // 重定向
},
{
path: '/login',
element: <Login /> // 登录页面
},
{
path: '/manage/*',
element: <Manage />, // home组件的父组件
meta: {
needLogin: true
}
children: [
{
path: 'home',
component: () => import('@/pages/home'), // 懒加载
meta: {
title: '首页',
needLogin: true, // 需要登录
access: ['004'] // 权限
},
}
]
},
]
export default routes
- component 属性需使用 import()懒加载方式引入
- 通过
react-router
官方的element
字段也能配置路由组件,但element
配置的不支持路由拦截。 - 嵌套路由的使用请看下面的
注意事项
。
4、配置前置路由守卫
/**
* @param {string} pathname 当前路由路径
* @param {object} meta 当前路由自定义meta字段
* @return {string | element | promise} 需要跳转到其他页时,就返回一个该页的path路径,或返回resolve该路径的promise对象
*/
const beforeRouteEnter = ({ pathname, meta }) => {
// 示例:动态修改页面title
if (meta.title !== undefined) {
document.title = meta.title;
}
// 示例:判断未登录跳转登录页
if (meta.needLogin) {
if (!isLogin) {
return "/login";
}
}
// 示例:没有路由权限或路由不存在 跳转到404页面
if (meta.access && !meta.access.includes("004")) {
return <Page404 />;
}
};
export default beforeRouteEnter;
5、API
主组件 EasyRouter 的配置属性 API:
routes
,Array 路由配置列表(必填)beforeRouteEnter
,Function 前置路由守卫函数(可选)loading
,Element 懒加载路由切换时的 loading 效果组件(可选)
路由配置列表 routes 的配置项 API:
redirect
,String 要重定向的路由路径component
,Function import()懒加载方式引入的组件meta
,Object 自定义的数据其他属性
, 参考react-router-dom
v6
(优先级:redirect > component > element)
6、注意事项
- 安装
react-router-fish
后,不需要再安装react-router-dom
react-router
的嵌套路由父级使用懒加载方式引用公共组件时存在一些问题,例如切换子路由时父级公共组件会重新渲染。建议改用官方 element 属性方式:
import Page from '@/components/layout' // 静态引入,不要使用import函数
{
path: '/',
element: <Page />, // 父级的公共组件使用element配置
children: [
... // 子级可以继续使用component配置
]
},
- 这里的前置路由守卫是目标路由加载前的拦截,且是运行在顶层环境(top level),非 react 组件环境。尽量避免引起目标路由重新渲染。
7、TS 类型
import {
MetaType, // 路由meta字段类型
RoutesType, // 路由配置数组类型
RoutesItemType, // 路由配属数组项类型
BeforeRouteEnterType, // 前置路由守卫入参类型
BeforeRouteEnterResType, // 前置路由守卫返回值类型
EasyRoutePropsType, // EasyRouter主组件props类型
} from "react-router-fish";
8、后期优化
后期计划参照vue-router
的实现思想进行优化
目前只实现了全局前置守卫