Nginx部署带React Router的React应用出现子路由重复如何解决

问题根因 #

该错误是React Router未适配子路径部署规则导致的：你将应用部署在域名的/app/patients二级路径下，但现有配置既没有指定React Router的基础路径，跳转逻辑也存在路径拼接错误，最终触发路径重复。

修复步骤 #

1. 配置React Router的basename参数 #

你使用的是React Router v6版本，在根路由的BrowserRouter组件上添加basename属性，值为你的实际部署子路径，原有路由配置不需要修改：

<BrowserRouter basename="/app/patients">
  <Routes>
    <Route path="/" element={<Patients />} />
    <Route path="/add" element={<AddPatient />} />
    <Route path="/:patientId" element={<Patient />} />
    <Route path="/:patientId/update" element={<UpdatePatient />} />
    <Route path="/:patientId/wounds/add" element={<AddWound />} />
    <Route path="/:patientId/wounds/:woundId/update" element={<UpdateWound />} />
    <Route path="*" element={<Navigate to="/" />} />
  </Routes>
</BrowserRouter>

配置完成后，所有以/开头的路由路径都会自动拼接/app/patients作为前缀，不需要手动拼接。

2. 修正路由跳转逻辑 #

所有Link组件、useNavigate调用的跳转路径，直接写相对于basename的根路径即可，禁止手动添加/app/patients前缀：

// 正确写法，会自动生成 /app/patients/605db06b642296fa97b7c4c0
<Link to={`/${patientId}`}>查看患者</Link>

// 错误写法，会导致路径重复
<Link to={`/app/patients/${patientId}`}>查看患者</Link>

3. 适配Nginx和打包配置 #

修改Nginx配置适配子路径部署：

server {
  listen       80;
  location /app/patients {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /app/patients/index.html =404;
  }
}

修改package.json的homepage字段：

确保打包生成的静态资源路径正确：

{
  "homepage": "/app/patients/"
}

验证 #

重新打包Docker镜像部署后，路由生成逻辑就会恢复正常，不会出现路径重复问题。

内容的提问来源于stack exchange，提问作者Jan-Philipp Heinrich