React app with Nginx produces duplicate sub routes

user_9111036 0
Viewed 56

We have a react App with react router, We build a Docker container and serve the App with an Nginx. Here is the nginx.conf:

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

We show a list of Items on a page and on a click one can see some more information about the item:

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

However when I deploy the App something weired happens:

I expect the App to use a Route like this:

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

But it uses this link:

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

So a part of the URL is duplicated which leads to the fact that the app surely is not opening any new details view.

How can I stop it, that parts of the route are duplicated?

react-router docker reactjs nginx
1 Answers

--update--

So I solved my problem by changing the nginx.conf from this:

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

to this:

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

However, I dont really understand the big difference it makes. So if anyone can explain, I would really appreciate.

Thanks in advance

user_91110360
Related