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的实现思想进行优化

目前只实现了全局前置守卫