react-router-pro出缓存路由了，极简配置，不依赖redux，mobx

#1

很多时候，我们需要在中后台系统中加入页签功能，类似vue-router的缓存功能，我们的路由不依赖任何数据流库，如redux，mobx等，即插即用更重要的是能够与RouterPro无缝切换

路由管理配置

import { KeepRouter } from "react-router-pro";
//这个是用来生成一个Map数据的函数
let createMap = (arr, type = 'id') => {
    let Maps = new Map();
    for (let i of arr.keys()) {
        if (type) {
            Maps.set(arr[i][type], arr[i]);
        } else 
            Maps.set(i, arr[i]);
        }
    }
    return Maps;
};

//项目全量的路由字典，很多初次接触的人会疑问
export const urlCompEnum = createMap(
  [
    {
      alias: "home",
      des: "主页",
      component: Index,
    },
    {
      alias: "SettingUser",
      des: "用户设置",
      component: SettingUser,
    },
    {
      alias: "SettingAuth",
      des: "权限管理",
      component: SettingAuth,
    },
    {
      alias: "SettingRole",
      des: "角色设置",
      component: SettingRole,
    },
    {
      alias: "SettingEnum",
      des: "枚举设置",
      component: SettingEnum,
    }
  ]

//从服务器拉取到的用户权限的对象数组，下面的例子是只有一个权限
let data = [{id: 1, parentId: 2, code: "test", name: "用户设置", zh_CN: "用户设置", en_US: "UserSetting"}]

let index = (props) => {

  
  
return (
  <KeepRouter
    //配置服务器返回的当前用户所能访问的路由
    data={data}
    //配置我们的真实component的字典
    compEnum={urlCompEnum}
    //包裹在我们整体项目最外层的固定组件，比如中后台系统的大的框
    HomeComp={Home}
    //404页面
    NotFound={NotFound}
    //403无权限时返回的页面
    NoAuth={NoAuth}
    //判断data数据中是路由的函数
    isRouter={(data) => {
      return !data.isShow;
    }}
  />
  )
}

页面中配置与使用

配置结束了，一般中后台系统还会需要在页面顶部实现一个页签的功能，页签需要一个当前已缓存的路由的列表，以及能够关闭一个缓存页面的函数，看以下的示例

import { NavUp } from "anup";
//NavUp是一个第三方的页签组件，用户如果需要的话可以自行实现或者寻找开源作品

let index = (props) => {
  const { routerActData, routerMinusDispatch } = props;

  //routerActData：是当前最新路由的对象数据
  //routerMinusDispatch：是一个函数，传入一个当前要关闭的路由数据，将会自动关闭一个缓存路由
  return (
        <NavUp
      routerMinusDispatch={routerMinusDispatch}
      routerActData={routerActData}
      history={history}
        />
  )
}

git地址：地址