请问如何实现动态路由

resuper commented 2 years ago

🧐 需求：菜单从数据库加载，路由也从数据库加载。

目前情况：目前菜单从数据库加载已经实现，目前菜单从数据库加载已经实现，但是菜单叶子节点中，每个页面打开都是404，只能访问配置好的静态路由对应的页面，原因：因为路由被删了，路由匹配不上导致404。
待大佬解答的问题：路由可否也从数据库加载？，route.js中原有的配置被我删除了，因为antdpro默认会用route.js生成菜单，所以我删除了
问题定位:缺失路由配置，参照umi官网动态加载路由，写法不对，umi官网写的动态修改路由的方法中require得到的对象不是antdpro中的组件，antdpro中是否有单独引入组件的方法???
问题分析过程：
1. umi.js 官网中===>https://umijs.org/zh-CN/docs/runtime-config#patchroutes-routes- routes.unshift({ path: '/foo', exact: true, component: require('@/extraRoutes/foo').default, }); require获得的对象不是antdPro中的组件对象，类型不一样(看结构感觉不是一个东西，我不是专业前端，有没说对的地方烦请大佬指正)

前言万语其实都在下面这张图和下面的示例代码中。。

💻 示例代码

route.js

import staticRoutesHighPriority from './staticRoutesHighPriority';
import staticRoutesLowPriority from './staticRoutesLowPriority';
export default [...staticRoutesHighPriority, ...staticRoutesLowPriority];

staticRoutesHighPriority.js

export default [
  {
    path: '/',
    redirect: '/welcome',
  },
];

staticRoutesLowPriority.js

/**
 * component 的值如果是相对路径，会以 src/pages 为基础路径开始解析
 * 官方参考:https://pro.ant.design/zh-CN/config/config#routes
 */
export default [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        path: '/user',
        routes: [
          {
            name: 'login',
            path: '/user/login',
            component: './user/Login',
          },
        ],
      },
      {
        component: './404',
      },
    ],
  },
  {
    path: '/developer',
    name: '开发者',
    title: '开发者',
    icon: 'crown',
    component: './example',
  },
  {
    path: '/welcome',
    name: 'welcome',
    icon: 'smile',
    component: './Welcome',
  },
  {
    component: './404',
  },
];

运行时配置，只贴出了实现动态加载菜单的部分 app.jsx

export const layout = ({ initialState }) => {
  return {
    // 其他配置省略...
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState,
      },
      request: async (params, defaultMenuData) => {
        // 图标映射
        initialState.MenuInfo.forEach((item) => {
          item.icon = iconMapping[item.icon];
        });
        return initialState.MenuInfo;
      },
    },
    ...initialState?.settings,
  };
};

// 模拟动态路由 ，换了n种写法依然不好使
let extraRoutes = [];
// 修改路由
export function patchRoutes({ routes }) {
  debugger;
  console.log(routes);
  const comp = require(`/src/pages/Welcome`);
  const comp2 = ()=> import('/src/pages/Welcome');
  console.log(comp);
  routes[1].routes.unshift({
    path: '/foo',
    exact: false,
    // component: require(`@/pages/example/NewPage`).default,
    // component: require(`@/pages/Welcome`).default,
    // component: ()=> import('/src/pages/Welcome'),
    component: ()=> import('/src/pages/Welcome').then((res)=>{
      console.log(res)
    }),
  });
}

export function render(oldRender) {
  oldRender();
}

caimingyi484 commented 2 years ago

同问 app.jsx文件

import { dynamic } from '@umijs/runtime';
import LoadingComponent from '@ant-design/pro-layout/es/PageLoading';

let extraRoutes = [];
export function patchRoutes({ routes }) {
  routes[1].routes = routes[1].routes.concat(extraRoutes);
  // 如果最后页面是404，所以要插入到时候第二个
  // routes[1].routes.splice(-1, 0, ...extraRoutes);
  console.log(history.location.pathname, routes)
  console.log(extraRoutes)
}
export function render(oldRender) {
  // fetch('/api/routes').then(res=>res.json()).then((res) => {
      extraRoutes = [{
        path: '/welcome2',
        name: 'welcome',
        icon: 'smile',
        // hideInMenu: true,
        exact: true,
        access: "canAdmin",
        component: dynamic({ loader: () => import('./pages/Form'), loading: LoadingComponent}),
      }];
      oldRender();
  // })
}

终于解决了！！！！！！