react-router-manage

简体中文 | English

功能简介

react-router-manage基于react-router v6版本实现，通过配置可实现路由的鉴权、路由守卫、路由的增删改查等功能。由于react-router v5升级到v6有较大的成本，react-router-manage提供了原来 v5 部分的 api 用于兼容使用 v5 的项目，用于平滑升级 v6

• 🛠 [config router] - 集中配置路由，快捷、方便管理。
• ＋ [addRoutes] - 动态增加路由：可使用 hookuseAddRoutes添加路由，自动刷新视图。
• ➖ [removeRoutes] - 动态删除路由：可使用 hookuseRemoveRoutes删除路由，自动刷新视图。
• 🖇 [updateRoutes] - 动态修改路由：可使用 hookuseUpdateRoutes修改路由。
• 🔐 [permission] - 权限控制：配置路由的 code，自动管理路由的权限
• 👨‍✈️‍ [Route guard] - 提供路由进入时的回调 beforeEnter and beforeEachMount, 路由离开时的钩子 useBeforeLeave
• 🌲 [navigation] - 层级导航：支持层级导航，自动实现父子级路由的导航栏生成，例如面包屑、菜单导航
• 基于 antd 自动生成的面包屑导航 antd-breadcrumbs

安装

npm install react-router-manage --save

示例

• 基本示例
• 子级路由的配置，即：Outlet 路由的配置
• 全局路由守卫beforeEachMount
• 路由操作useAddRoutes,useUpdateRoutes, useRemoveRoutes
• 认证-基础示例
• 基于 antd 的自动生成面包屑, antd-breadcrumbs

配置项

defineRouterConfig(routerConfig)

路由的全局配置

defineRouterConfig 返回额外属性

| 字段名 | 说明 | 类型 | 是否必填 | | ---------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | -------- | -------------- | | navigate | 用于在Router外进行跳转路由，需初始化 <Router /> 后可调用 | (to: string, {query: Record<string, any>; params: Record<string, any>; state: any}) => void} | | not required |

路由模式

路由模式目前有两种

• history模式
• hash模式

一个简单的全局配置（history模式）

import React from 'react';
import { MRouter, defineRouterConfig } from 'react-router-manage';

const routerConfig = defineRouterConfig({
  basename: '/',
  routes: [{...}], // 请查看下方路由配置 routes
  // autoDocumentTitle: true, // 设置true，会自动设置变换document.title,
  // autoDocumentTitle: (routes) => return `网易云商-${routes.map((i) => i.title).join('-')}`, // 自定已配置document.title的设置

  // beforeEachMount: (to, next) => { // 配置全局的路由进入守卫，可查看下方全局路由守卫介绍
  //   console.log(to)
  //   next();
  // }
})

function App () {
  return (
    <MRouter routeConfig={routeConfig}>
      {(children) => children}
    </MRouter>
  )
}

一个简单的全局配置（hash模式）

import React from 'react';
import { MHRouter, defineRouterConfig } from 'react-router-manage';

const routerConfig = defineRouterConfig({
  basename: '/',
  routes: [{...}], // 请查看下方路由配置 routes
  // autoDocumentTitle: true, // 设置true，会自动设置变换document.title,
  // autoDocumentTitle: (routes) => return `网易云商-${routes.map((i) => i.title).join('-')}`, // 自定已配置document.title的设置

  // beforeEachMount: (to, next) => { // 配置全局的路由进入守卫，可查看下方全局路由守卫介绍
  //   console.log(to)
  //   next();
  // }
})

function App () {
  return (
    <MHRouter routeConfig={routeConfig}>
      {(children) => children}
    </MHRouter>
  )
}

路由配置 routes

BreadcrumbsI

注意事项

• 如果在code里配置了一个函数，由于在路由初始化会批量调用，请不要进行异步调用，如果需要建议使用beforeEnter达到同样效果
• 如果父级路由没有配置 component， 跳转到该路由则会寻找 items,children 下第一个有权限的路由，若找不到，则会显示无权限页面
• 如果redirect和component同时进行了配置，则component会被忽略
• beforeEnter 和 beforeEachMount 中 next可传入一个组件，若传入则会渲染该组件, 如果在 react 使用严格模式，则函数可能会调用两次，这个是正常情况

items 与 children

通过 ys-router，你可以使用children, items配置来表达路由导航的父子关系。

items 同一级别的路由，父级与子级渲染一个

/**
 *  文章列表页和文章详情页在不同的页面
 *  /user/article/list  文章列表页面
 *  /user/article/detail 文章详情页
 * */
/user/article/list                     /user/article/detail
+------------------+                  +-----------------+
| +--------------+ |                  | +-------------+ |
| | ------------ | |  +------------>  | | content     | |
| | ------------ | |                  | |             | |
| | ------------ | |                  | |             | |
| | ------------ | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

一个有基本路由配置的示例

```tsx import React from "react"; import { MRouter, defineRouterConfig } from "react-router-manage";

const Users = () => { return

Users

; }; const Profile = () => { return <