如何为部署在不同子目录的React-Router应用配置动态basename？

当然没问题！我之前在多环境部署React应用时也碰到过一模一样的场景，下面给你几个靠谱的解决方案：

方案一：通过环境变量注入动态basename #

这是最可控的方式，不同部署环境通过设置环境变量来传递对应的basename值，打包时直接读取即可。

比如在Create React App项目中，我们可以用前缀为REACT_APP_的环境变量：

• 生产环境：设置REACT_APP_BASENAME=/（或者留空，默认用/）
• env1环境：设置REACT_APP_BASENAME=/appname/env1
• env2环境：设置REACT_APP_BASENAME=/appname/env2

然后在代码中这样使用：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// 读取环境变量，默认值设为/
const basename = process.env.REACT_APP_BASENAME || '/';

function App() {
  return (
    <Router basename={basename}>
      <Switch>
        <Route path="/" exact component={MyComponent} />
        {/* 其他路由配置 */}
      </Switch>
    </Router>
  );
}

这种方式的优势是每个环境的打包产物独立，路由规则清晰，不容易出问题。

方案二：从当前URL自动推断basename #

如果希望一次打包就能部署到多个子目录，不需要针对每个环境重新打包，可以通过解析当前浏览器的URL来动态生成basename。

比如写一个简单的工具函数来提取匹配的子路径：

function getDynamicBasename() {
  const pathname = window.location.pathname;
  // 根据你的部署路径规则写正则，这里匹配/appname/env1、/appname/env2这类格式
  const matchResult = pathname.match(/^\/appname\/env\d+/);
  // 匹配到就返回对应的路径，否则返回根路径/
  return matchResult ? matchResult[0] : '/';
}

function App() {
  const basename = getDynamicBasename();
  
  return (
    <Router basename={basename}>
      <Switch>
        <Route path="/" exact component={MyComponent} />
        {/* 其他路由 */}
      </Switch>
    </Router>
  );
}

注意：这个方法需要你的部署路径有统一的格式，正则要根据实际情况调整，避免匹配到错误的路径。

关键补充：服务器必须配置路由Fallback #

不管用哪种方法，都必须配置服务器的fallback规则，否则刷新页面会出现404错误。因为Browser History模式下，刷新时服务器会尝试寻找对应路径的静态文件，而React的路由是客户端路由，所有请求都需要指向index.html。

以Nginx为例，配置示例如下：

# 处理env1子目录
location /appname/env1 {
  try_files $uri $uri/ /appname/env1/index.html;
}

# 处理env2子目录
location /appname/env2 {
  try_files $uri $uri/ /appname/env2/index.html;
}

# 处理生产环境根路径
location / {
  try_files $uri $uri/ /index.html;
}

其他服务器（比如Apache、IIS）也需要类似的配置，核心就是让所有路由请求都返回index.html。

内容的提问来源于stack exchange，提问作者Umberto Di Lorenzo