umi-手动路由配置

最新推荐文章于 2025-09-22 22:23:23 发布

原创最新推荐文章于 2025-09-22 22:23:23 发布 · 784 阅读

0 ·

CC 4.0 BY-SA版权

umi 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了手动配置路由时遇到的问题，强调了在component文件中添加children参数的重要性。如果不添加，二级路由将无法正确匹配并渲染。通过一个具体的例子，展示了当在@test/rank/index文件中遗漏children参数时，子路由test/rank不会被渲染，导致内容无法显示。修复此问题可以确保多级路由的正常工作。

手动路由配置

在配置路由参数的过程中，对应的component文件要写children参数，否则只会匹配一级路由，子路由内容不展示

{
        path: '/test',
        title: 'name',
        component: '@/pages/test/rank/index',
        routes: [
          {
            path: '/test/rank/index',
            title: 'name',
            component: '@/pages/test/rank',
          },
        ]
}
@/pages/test/rank/index文件：
import React from 'react';
const Index = () => {
  return <div>'test-首页'</div>;
};
export default Index;
//此文件中未写children参数，导致匹配子路由test/rank/index时未进行渲染