Cuando se carga la aplicación react.js , el react-router maneja las rutas en la interfaz. Digamos, por ejemplo, que está en http://a.com . Luego, en la página, navega a http://a.com/b . Este cambio de ruta se maneja en el propio navegador. Ahora, cuando actualiza o abre la URL http://a.com/b en una nueva pestaña, la solicitud va a su nginx donde la ruta en particular no existe y, por lo tanto, obtiene 404.

Para evitar esto, debe cargar el archivo raíz (generalmente index.html) para todas las rutas que no coincidan, de modo que nginx envíe el archivo y la ruta sea manejada por su aplicación de reacción en el navegador. Para hacer esto, debe realizar el cambio a continuación en su nginx.conf o sites-enabled apropiadamente

 location / { try_files $uri /index.html; }

Esto le dice a nginx que busque el $uri especificado, si no puede encontrar uno, envía index.html de regreso al navegador. (Consulte https://serverfault.com/questions/329592/how-does-try-files-work para obtener más detalles)

Las respuestas dadas aquí son correctas. Pero estaba luchando con esto cuando intentaba implementar mi aplicación React en un contenedor acoplable. El problema estaba en cómo cambiar las configuraciones de nginx dentro de un contenedor docker.

Paso 1: Prepare su Dockerfile

 # Stage 1 FROM node:8 as react-build WORKDIR /app COPY . ./ RUN yarn RUN yarn build # Stage 2 - the production environment FROM nginx:alpine COPY nginx.conf /etc/nginx/conf.d/default.conf COPY --from=react-build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

Consulte la línea con el comando: COPY nginx.conf /etc/nginx/conf.d/default.conf . Aquí, le estamos diciendo a Docker que copie el archivo nginx.conf del host de Docker al contenedor de Docker.

Paso 2: tenga un archivo nginx.conf en la carpeta raíz de su aplicación

 server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }

Paso 3: ahora crea la imagen de la ventana acoplable y ejecútala

 $ docker build . -t react-docker

Esto debería construir su imagen acoplable con éxito. Para verificar eso, ejecute

 $ docker images

ahora corre

 $ docker run -p 8000:80 react-docker

y navegue a http://localhost:8000

Esto fue inspirado por este blog .

Para mi la solución fue:

 location / { root /var/www/myapp/build; index index.html; try_files $uri /index.html$is_args$args =404; }