🧐[问题]antd pro v5在routes.ts配置好路由启动后，点击菜单显示404

[diaomina]

🧐 问题描述

💻 示例代码

🚑 其他信息

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [Ant Pro 安装成功后，启动失败 🐛[BUG] #8132][Ant Pro 安装成功后，启动失败 🐛[BUG]][61%]

[chenshuai2144]

路由配置看一下，估计是被覆盖了

[diaomina]

路由配置看一下，估计是被覆盖了

你好，路由配置如下：

export default [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        path: '/user',
        routes: [
          {
            name: 'login',
            path: '/user/login',
            component: './user/Login',
          },
        ],
      },
    ],
  },
  {
    path: '/welcome',
    name: 'welcome',
    icon: 'smile',
    component: './Welcome',
  },
  {
    path: '/admin',
    name: 'admin',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',
    routes: [
      {
        path: '/admin/sub-page',
        name: 'sub-page',
        icon: 'smile',
        component: './Welcome',
      },
    ],
  },
  {
    name: 'list.table-list',
    icon: 'table',
    path: '/list',
    component: './TableList',
  },
  {
    path: '/',
    redirect: '/welcome',
  },
  {
    component: './404',
  },
  {
    path: '/layout/',
    locale: 'menu.home',
    name: 'home',
    icon: 'smile',
    access: 'canAdmin',
    component: './Welcome',
  },
  {
    path: '/model/eos_flow_model/process_history_map_view',
    layout: false,
  },
  {
    path: '/api/',
    layout: false,
  },
  {
    // 引擎配置
    name: 'engine.basis', // 此处理应取国际化文件中对应的key值
    locale: 'menu.engine.basis',
    icon: 'smile',
    access: 'canAdmin',
    // path: '/engine/basis',
    routes: [
      {
        // 基础配置
        name: 'engine.basis.configuration',
        locale: 'menu.engine.basis.configuration',
        icon: 'smile',
        access: 'canAdmin',
        path: '/engine/basis/configuration',
        component: './engine/basis/Configuration',
      },
      {
        // 操作方式
        name: 'engine.basis.operation',
        locale: 'menu.engine.basis.operation',
        icon: 'smile',
        access: 'canAdmin',
        path: '/engine/basis/operation',
        component: './engine/basis/Operation',
      },
      {
        // 审批意见
        name: 'engine.basis.comments',
        locale: 'menu.engine.basis.comments',
        icon: 'smile',
        access: 'canAdmin',
        path: '/engine/basis/comments',
        component: './engine/basis/Comments',
      },
      {
        // 数据源配置
        name: 'engine.basis.dbsource',
        locale: 'menu.engine.basis.dbsource',
        icon: 'smile',
        access: 'canAdmin',
        path: '/engine/basis/dbsource',
        component: './engine/basis/Dbsource',
      },
    ],
  },
];

[diaomina]

路由配置看一下，估计是被覆盖了

config.ts如下：

// https://umijs.org/config/
import { defineConfig } from 'umi';
import { join } from 'path';

import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';

const { REACT_APP_ENV } = process.env;

export default defineConfig({
  hash: true,
  antd: {},
  dva: {
    hmr: true,
  },
  layout: {
    // https://umijs.org/zh-CN/plugins/plugin-layout
    locale: true,
    siderWidth: 208,
    ...defaultSettings,
  },
  // https://umijs.org/zh-CN/plugins/plugin-locale
  locale: {
    // default zh-CN
    default: 'zh-CN',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
  },
  dynamicImport: {
    loading: '@ant-design/pro-layout/es/PageLoading',
  },
  targets: {
    ie: 11,
  },
  // 若.umirc.(ts|js)或 config/config.(ts|js) 文件中对 router 进行了配置，约定式路由将失效、新添的页面不会自动被 umi 编译，umi 将使用配置式路由。
  // umi routes: https://umijs.org/docs/routing
  routes,
  // Theme for antd: https://ant.design/docs/react/customize-theme-cn
  theme: {
    'primary-color': defaultSettings.primaryColor,
  },
  // esbuild is father build tools
  // https://umijs.org/plugins/plugin-esbuild
  esbuild: {},
  title: false,
  ignoreMomentLocale: true,
  proxy: proxy[REACT_APP_ENV || 'dev'],
  manifest: {
    basePath: '/',
  },
  // Fast Refresh 热更新
  fastRefresh: {},
  openAPI: [
    {
      requestLibPath: "import { request } from 'umi'",
      // 或者使用在线的版本
      // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
      schemaPath: join(__dirname, 'oneapi.json'),
      mock: false,
    },
    {
      requestLibPath: "import { request } from 'umi'",
      schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
      projectName: 'swagger',
    },
  ],
});

[lishaoh]

@diaomina
把

{
    component: './404',
 }

放在路由配置最后面，不然前面的路由没有匹配到，最后只会走404

[diaomina]

@diaomina
把

{
    component: './404',
 }

放在路由配置最后面，不然前面的路由没有匹配到，最后只会走404

可以啦，感谢！！！

[diaomina]

@diaomina
把

{
    component: './404',
 }

放在路由配置最后面，不然前面的路由没有匹配到，最后只会走404

好像只有前面的路由和子路由有用，后面的会显示不出界面，也不显示404

[diaomina]

已解决，主路由需要配置path，否则将会导致后面的路由无法显示