Introduction

A React app that works at / but shows a white screen after refreshing /users/123 usually has a server-side routing problem, not a React Router problem by itself. React Router handles navigation in the browser, but a hard refresh sends a real HTTP request to the server for /users/123. If NGINX, the ingress, or the static file server does not fall back to index.html, the app never boots and the browser shows a blank page or a 404 behind the scenes.

Understand Which Component Is Failing

There are usually three layers involved:

• React Router in the browser
• NGINX Ingress routing traffic to a service
• the web server inside the app container serving static files

Refreshing a nested route means the browser asks the server for that path directly. If the server looks for a literal file at /users/123 and does not find one, the SPA entry point is never returned.

So the general fix is:

• make the static file server return index.html for unknown routes
• keep asset paths correct for the deployment base path
• use React Router basename if the app is served under a subpath

The Most Common Fix: try_files in the App NGINX

If your React build is served by NGINX inside the container, configure the location block to fall back to index.html.

1server {
2    listen 80;
3    root /usr/share/nginx/html;
4    index index.html;
5
6    location / {
7        try_files $uri $uri/ /index.html;
8    }
9}

That line is usually the real fix. It says:

• serve the requested file if it exists
• otherwise serve index.html

Once index.html is returned, React Router can read the URL and render the correct page client-side.

Ingress Can Route Traffic, but It Usually Does Not Replace SPA Fallback Logic

NGINX Ingress decides which service receives the request. It does not automatically know your SPA fallback strategy.

A simple ingress might look like this:

1apiVersion: networking.k8s.io/v1
2kind: Ingress
3metadata:
4  name: frontend
5spec:
6  ingressClassName: nginx
7  rules:
8    - host: app.example.com
9      http:
10        paths:
11          - path: /
12            pathType: Prefix
13            backend:
14              service:
15                name: frontend-service
16                port:
17                  number: 80

That gets the traffic to the frontend service. The pod serving the built React app still needs to know how to respond to /users/123.

Some setups use ingress rewrite annotations, but for SPAs that often treats the symptom rather than the cause. The cleaner pattern is correct fallback behavior in the static file server.

Apps Served Under a Subpath Need More Than Fallback

If the app is deployed under /app instead of /, you can still get a white screen even with index.html fallback if asset URLs or router configuration are wrong.

Typical fixes include:

• set React Router basename="/app"
• configure the build so static asset paths use /app/
• ensure ingress routes /app to the frontend service

A React Router example:

1import { BrowserRouter } from 'react-router-dom';
2import ReactDOM from 'react-dom/client';
3import App from './App';
4
5ReactDOM.createRoot(document.getElementById('root')).render(
6  <BrowserRouter basename="/app">
7    <App />
8  </BrowserRouter>
9);

If basename is wrong, the HTML may load but JavaScript bundles or route matching can still break, producing what looks like the same white-screen symptom.

Debug It from the Browser Network Tab

The fastest way to diagnose this class of problem is to inspect the network requests after refreshing a nested route.

Look for:

• '404 or 403 on the route request itself'
• JavaScript bundles returning 404
• 'index.html being served with the wrong base path'
• an HTML error page being returned where JavaScript was expected

If the app works when navigating in-browser but fails only on refresh, that is a strong sign the client-side router is fine and the server-side fallback is not.

Common Pitfalls

A common mistake is adding only ingress rewrite rules and never fixing the NGINX config that serves the React build.

Another mistake is forgetting basename or correct asset paths when the app is hosted below /.

People also sometimes interpret a white screen as a React crash, when the browser actually failed to load index.html or the JavaScript bundle after refresh.

Finally, do not forget caching. An old cached index.html that points to missing asset filenames can create a similar blank-page symptom.

Summary

• Refreshing a nested React Router URL sends a real HTTP request that the server must handle
• The usual fix is to return index.html for unknown paths with try_files
• NGINX Ingress routes traffic to the frontend service, but it does not replace SPA fallback logic inside the app server
• If the app is served from a subpath, configure React Router basename and asset paths accordingly
• Use the browser network tab to distinguish route fallback failures from missing bundle files
• A white screen on refresh is usually a server configuration issue, not a React Router bug