使用 Nginx 的 React 应用程序产生重复的子路由答案

【问题标题】：React app with Nginx produces duplicate sub routes使用 Nginx 的 React 应用程序产生重复的子路由
【发布时间】：2021-10-22 11:57:10
【问题描述】：

我们有一个带有反应路由器的反应应用程序，我们构建了一个 Docker 容器并使用 Nginx 为应用程序提供服务。这是 nginx.conf：

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

我们在页面上显示一个项目列表，点击后可以看到有关该项目的更多信息：

<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>

但是，当我部署应用程序时，发生了一些奇怪的事情：

我希望应用使用这样的路由：

https://<publicDomain>/app/patients/605db06b642296fa97b7c4c0

但它使用这个链接：

https://<publicDomain>/app/patients/app/patients/605db06b642296fa97b7c4c0

所以 URL 的一部分是重复的，这导致应用程序肯定没有打开任何新的详细信息视图。

如何阻止它，部分路线重复？

【问题讨论】：

标签： reactjs docker nginx react-router

【解决方案1】：

--更新--

所以我通过更改 nginx.conf 解决了我的问题：

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

到这里：

server {
  listen       80;
  root   /usr/share/nginx/html;
  location / {
    try_files $uri /index.html;
  }
}

但是，我真的不明白它带来的巨大差异。所以如果有人能解释一下，我将不胜感激。

提前致谢

【讨论】：