如何为多文件夹部署的React应用自动设置路由basename？

问题场景 #

服务器上存在多个存放不同版本React应用的目录，例如：

data/www/demo1
data/www/demo2
...
data/www/demo15

每个目录直接拷贝了React项目dist文件夹的文件，可通过http://server/demo1这类URL访问对应版本应用。添加路由后，因未配置basename导致路由失效，当前路由代码如下：

root.render(
  <StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="attributes" element={<Attributes />} />
          <Route path="*" element={<InfoPage />} />
        </Routes>
      </BrowserRouter>
  </StrictMode>
);

需求：无需硬编码basename重复构建15次，实现自动获取应用所在文件夹名称作为basename。

解决方案 #

方法1：运行时从URL路径提取basename #

直接在浏览器运行时解析当前URL的路径，提取应用所在的目录名称作为basename，一次构建即可部署到任意子目录：

// 解析当前URL，获取应用所在的目录名
const getBasename = () => {
  // 分割路径并过滤空字符串，取第一个有效段（如demo1、demo2）
  const pathSegments = window.location.pathname.split('/').filter(segment => segment);
  return pathSegments.length > 0 ? `/${pathSegments[0]}` : '/';
};

root.render(
  <StrictMode>
      <BrowserRouter basename={getBasename()}>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="attributes" element={<Attributes />} />
          <Route path="*" element={<InfoPage />} />
        </Routes>
      </BrowserRouter>
  </StrictMode>
);

方法2：CI/CD批量构建时注入环境变量（可选） #

如果需要提前指定部署目录但不想手动重复操作，可借助CI/CD工具批量构建时注入环境变量。不过这种方法需要执行多次构建，灵活性不如方法1：

1. 项目代码中使用环境变量：

const basename = process.env.REACT_APP_BASENAME || '/';

root.render(
  <StrictMode>
      <BrowserRouter basename={basename}>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="attributes" element={<Attributes />} />
          <Route path="*" element={<InfoPage />} />
        </Routes>
      </BrowserRouter>
  </StrictMode>
);

2. 批量构建命令示例：

# 构建并部署demo1
REACT_APP_BASENAME="/demo1" npm run build && mv build ../data/www/demo1

# 构建并部署demo2
REACT_APP_BASENAME="/demo2" npm run build && mv build ../data/www/demo2

注意事项 #

• 需确保服务器配置正确，刷新页面时能返回index.html，否则单页应用路由刷新会出现404错误。
• 若应用部署在更深层级的子目录（如http://server/apps/demo1），可调整getBasename函数的逻辑，提取对应层级的路径段。

内容的提问来源于stack exchange，提问作者char m