Umi.js 4.x 中配置base后相对路径跳转问题解析

问题背景

在使用Umi.js 4.x框架开发前端应用时，开发者经常会遇到路由配置和跳转的问题。特别是在配置了base路径后，使用history.push进行相对路径跳转时可能会出现不符合预期的行为。

问题重现

当我们在Umi.js项目中配置了base路径（例如'/xyz/'）后，在页面中进行路由跳转时：

1. 使用相对路径跳转（如history.push('./2')）会导致跳转到错误的路径（如/xyz/.2）
2. 而使用绝对路径跳转（如history.push('/course/create/2')）则能正确跳转到预期路径

技术分析

底层机制差异

这个问题实际上反映了React Router和原生history API在处理相对路径时的不同行为：

1. React Router的useNavigate：

   • 无论当前路径是否以斜杠结尾，都能正确处理相对路径
   • 例如路径为/a/b或/a/b/时，navigate('./c')都会跳转到/a/b/c

2. history.push：

   • 当前路径是否以斜杠结尾会影响跳转结果
   • 路径为/a/b时，history.push('./c')会跳转到/a/c
   • 路径为/a/b/时，history.push('./c')才会跳转到/a/b/c

为什么会出现这种差异

React Router作为一个高级路由库，内部实现了路径标准化处理，能够智能地处理各种路径格式。而history API是更底层的实现，直接基于浏览器原生history对象，行为更加"原始"。

解决方案

基于上述分析，我们有以下建议：

1. 统一使用React Router的导航方法：

   • 在组件中使用useNavigate钩子
   • 避免直接使用history.push进行相对路径跳转

2. 保持路径格式一致性：

   • 如果必须使用history API，确保路径格式统一
   • 可以考虑在跳转前对路径进行标准化处理

3. 理解base路径的影响：

   • 配置base路径后，所有路由都会基于该路径
   • 绝对路径跳转会自动包含base路径
   • 相对路径跳转需要特别注意当前路径结构

最佳实践

在实际开发中，我们推荐：

1. 优先使用React Router提供的导航方法
2. 对于复杂路由场景，考虑封装自定义导航工具函数
3. 在项目初期就规划好路由结构，避免后期频繁修改
4. 编写路由跳转的单元测试，确保行为符合预期

总结

Umi.js作为企业级前端应用框架，集成了React Router等优秀库，提供了强大的路由功能。理解不同导航方法的行为差异，有助于开发者编写更健壮的路由代码。在配置了base路径的场景下，特别需要注意相对路径跳转的处理方式，选择最适合项目需求的导航方案。