umi4运行时配置多个不同的路由

项目搭建

使用umi@4+simple

运行时配置

官网默认src/app.tsx

这里使用了mock进行模拟后端给的权限鉴定 需要在.umirc文件里面打开,这是我的配置

export default defineConfig({
  npmClient: "yarn",
  // clientLoader: {}, //路由数据加载
  // 修改icon
  //links: [
  // href的图片你可以放在public里面，直接./图片名.png 就可以了，也可以是cdn链接
  // { rel: "icon", href: "./img_3.png" },
  //],
  publicPath: "/",
  history: {
    type: "browser",
  },
  mock: {},
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: "./home",
    },
    // PageRouter,//判断之后
    {
      path: "*",
      component: "./404",
    },
  ],
});

app.tsx

import React from "react";
//patchClientRoutes是umi@4
//patchRoutes是umi@3
const Admin = React.lazy(() => import("@/layouts/admin"));
const Home = React.lazy(() => import("@/pages/home"));
const User = React.lazy(() => import("@/layouts/usually"));
let extraRoutes: any[];
export function patchClientRoutes({ routes }) {
  extraRoutes.forEach((route) => {
    routes.unshift({
      path: route.path,
      element: route.element,
      children: route.children,
    });
  });
  console.log(extraRoutes);
}
export function render(oldRender) {
  fetch("/api/routes")
    .then((res) => res.json())
    .then((res) => {
      let author = "admin";
      console.log(res);
      //不同的角色生成不同的路由,路由参照router6 https://reactrouter.com/en/6.6.1/utils/create-routes-from-elements
      if (res.type === author) {
        extraRoutes = [
          {
            path: "/admin",
            element: <Admin />,
            children: [{ path: "home", element: <Home /> }],
          },
        ];
      } else {
        extraRoutes = [
          {
            path: "/user",
            element: <User />,
            children: [{ path: "home", element: <Home /> }],
          },
        ];
      }
      oldRender();
    });
}

这里是使用了不同的布局

mock

//mock/app.ts
export default {
    "/api/routes": {
    type: "user"
    },
  };