使用react-router-dom时base路径被修改、地址栏URL异常如何解决

问题根因 #

react-router-dom v5的BrowserRouter默认使用站点根路径/作为路由基础前缀，你没有手动配置匹配部署环境的基础路径，导致跳转时直接覆盖了原有base路径。

解决方案 #

第一步：修改index.js中BrowserRouter配置 #

给BrowserRouter添加basename属性，属性值为你部署的固定base路径/master/app/testplanweb：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./App";
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  {/* 新增basename属性 */}
  <BrowserRouter basename="/master/app/testplanweb">
      <App />
    </BrowserRouter>,
  document.getElementById("root")
);

reportWebVitals();

第二步（可选）：适配GitLab流水线动态注入base路径 #

如果你的base路径会随部署环境变化，不要硬编码basename，可通过环境变量注入：

1. 在GitLab流水线配置中添加打包时的环境变量，比如REACT_APP_ROUTE_BASE=/master/app/testplanweb
2. 修改index.js中basename取值：

<BrowserRouter basename={process.env.REACT_APP_ROUTE_BASE}>

修改完成后，点击<Link to="/about">跳转时，地址栏会自动拼接base路径，得到预期的https://uat.highnoon.com/master/app/testplanweb/about，原有路由逻辑不需要额外调整即可正常运行。
如果同步存在静态资源加载路径错误的问题，同步调整项目打包配置里的publicPath和上述base路径保持一致即可。

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