Umi.js 项目中获取路由 basename 的最佳实践

在 Umi.js 项目中，开发者有时需要获取当前应用的路由 basename 值，特别是在处理跨应用跳转、微前端场景或自定义插件开发时。本文将深入探讨几种获取 basename 的可靠方法。

为什么需要 basename

basename 是 Umi.js 应用的基础路径前缀，通常在配置文件中通过 base 参数设置。在以下场景中特别重要：

1. 微前端架构中子应用需要拼接完整路径
2. 自定义插件中需要处理登录跳转等逻辑
3. 跨应用导航时需要确保路径正确性

获取 basename 的几种方式

1. 通过环境变量注入

最推荐的方式是在配置文件中使用 define 配置项：

// .umirc.ts
export default {
  define: {
    BASE_NAME: '/your-base-path'
  }
}

然后在代码中通过 process.env.BASE_NAME 获取。

2. 通过 modifyClientRenderOpts 钩子

在 app.ts 中，可以通过修改客户端渲染选项获取：

// src/app.ts
export const modifyClientRenderOpts = (opts: any) => {
  console.log('basename:', opts.basename);
  return opts;
}

3. 微前端场景下的处理

在 qiankun 微前端架构中，子应用可以通过以下方式获取完整路径：

• 通过主应用传递的 props 获取
• 使用全局状态管理共享 basename
• 在主应用生命周期钩子中暴露 basename

注意事项

1. 避免直接依赖内部实现，如直接导入 @@/core/history
2. 生产环境和开发环境的 basename 可能不同，需要做好兼容
3. 在 SSR 场景下，需要考虑服务端和客户端 basename 的一致性

最佳实践建议

对于大多数场景，推荐使用环境变量注入的方式，这是最稳定且符合 Umi.js 设计理念的做法。对于复杂场景，可以考虑结合多种方式，确保应用在不同环境下都能正确获取 basename。

通过合理使用这些方法，开发者可以优雅地处理各种需要 basename 的场景，确保应用的稳定性和可维护性。