Ant Design Pro 路由配置问题解析与解决方案

问题背景

在使用 Ant Design Pro 脚手架创建项目时，开发者可能会遇到一个常见的路由配置问题。当项目启动后，控制台会报出错误信息："Absolute route path "/*" nested under path "/user" is not valid. An absolute child route path must start with the combined path of all its parent routes." 这个错误直接导致项目无法正常运行。

错误原因分析

这个问题的根源在于路由配置文件(config/routes.ts)中存在不合理的嵌套路由配置。具体表现为：

1. 在 /user 路由下定义了一个 /* 的绝对路径子路由
2. 按照 React Router 的规则，绝对路径的子路由必须包含其所有父路由的路径
3. 项目顶层已经定义了一个全局的 /* 404 路由
4. 这种重复定义导致了路由匹配冲突

技术细节

在 React Router 的路由配置中，路径可以分为两种类型：

1. 绝对路径：以 / 开头，会从根路由开始匹配
2. 相对路径：不以 / 开头，会相对于父路由进行匹配

当我们在 /user 路由下定义 /* 时，实际上是在尝试定义一个绝对路径的子路由，这违反了 React Router 的规则。正确的做法应该是使用相对路径或者将绝对路径补全。

解决方案

针对这个问题，我们有以下几种解决方案：

方案一：修改为相对路径

{
  path: '/user',
  // ...其他配置
  routes: [
    // ...其他子路由
    {
      component: '404',
      path: '*', // 去掉开头的斜杠，改为相对路径
    }
  ]
}

方案二：使用完整绝对路径

{
  path: '/user',
  // ...其他配置
  routes: [
    // ...其他子路由
    {
      component: '404',
      path: '/user/*', // 补全绝对路径
    }
  ]
}

方案三：移除重复的404路由

如果项目顶层已经定义了全局的404路由，可以考虑直接移除 /user 下的404路由配置：

{
  path: '/user',
  // ...其他配置
  routes: [
    // ...其他子路由
    // 移除404路由配置
  ]
}

注意事项

在修改路由配置后，开发者可能会遇到另一个现象：访问项目时直接跳过了登录页面。这是因为：

1. Ant Design Pro 默认会检查本地存储中的token
2. 如果存在有效token，会自动跳转到首页
3. 要测试登录流程，需要清除浏览器缓存或使用无痕模式

如果需要强制显示登录页面，可以：

1. 清除浏览器本地存储(localStorage)和会话存储(sessionStorage)
2. 删除或修改 src/utils/authority.ts 中的token检查逻辑
3. 在开发环境中临时禁用自动登录功能

最佳实践建议

1. 路由规划：在项目初期就规划好路由结构，避免后期频繁修改
2. 路径规范：统一使用相对路径或绝对路径，不要混用
3. 404处理：全局只需定义一个404路由，通常放在最外层
4. 开发调试：使用浏览器开发者工具监控路由变化
5. 版本控制：修改路由配置后及时提交代码变更

总结

Ant Design Pro 作为企业级中台前端解决方案，其路由系统基于 Umi 和 React Router 实现。理解并正确配置路由是项目开发的基础。通过本文的分析和解决方案，开发者可以快速定位和解决类似的路由配置问题，确保项目顺利运行。