How to Fix React Router 404 Errors After Deployment

If your React Router links work when you click around your website but a page returns 404 when you refresh it, you are probably dealing with a server-side routing configuration problem. This happens because React Router handles navigation inside the browser, while your hosting server handles direct HTTP requests.

The Quick Explanation

Suppose your React application has /, /products, and /contact. Clicking a link to /products can work because React Router changes the page without requesting a new HTML document from the server. But if you refresh https://example.com/products, the browser asks the server for /products. If the server cannot find a physical resource at that path, it may return 404. Your hosting environment needs to send the request to the React application's entry point.

Step 1: Confirm React Router Is Actually Working

First test navigation inside your application. Open your homepage and click a link to another route. If the route loads correctly, React Router itself is probably functioning. Now refresh that page. If the refresh produces 404, you have isolated the problem to direct server requests.

Step 2: Confirm Your Build Is Correct

Run the production build command used by your project. For example, npm run build. Then inspect the generated output. Depending on your tooling, it may be dist or build. Your hosting provider needs to serve the generated production files.

Step 3: Check Your Hosting's SPA Fallback

The important configuration is the fallback behavior. When the server receives a request such as /products, it needs to serve the React application's entry HTML instead of looking for a physical /products directory. The exact configuration depends on your hosting platform. Do not copy configuration intended for a different server without checking the platform's documentation.

Step 4: Check Direct URLs

Test multiple routes directly. For example, /about, /products, and /contact. Open each URL in a new browser tab. If all of them work directly, your routing fallback is probably working.

Step 5: Check Asset Paths

Sometimes an application appears to have a routing problem when the real issue is incorrect asset paths. Open your browser developer tools and check the Network tab. Look for failed requests involving JavaScript, CSS, images, and fonts. A JavaScript file returning 404 can prevent the React application from loading properly.

Step 6: Check the Base Path

If your application is deployed inside a subdirectory rather than the domain root, your build configuration may need to know the correct base path. For example, example.com/my-app/ is different from example.com/. If the application expects assets at the root but is actually deployed inside /my-app/, files can fail to load.

Step 7: Check Route Links

Make sure your links use the routing approach expected by your application. Avoid accidentally mixing different routing systems or hardcoded URLs that do not match your deployment structure.

Step 8: Test Again After Deployment

After correcting the configuration, build the application, deploy the new production output, open the homepage, navigate to a route, refresh it, open the route directly, and test another route. If the routes survive direct navigation and refresh, the issue is resolved.

Common Mistakes

Uploading the Wrong Folder

Deploying the source project instead of the generated production output can cause unexpected behavior.

Forgetting SPA Fallback

This is the most common reason for a React Router refresh 404.

Incorrect Base Path

Applications deployed under subdirectories need the correct base configuration.

Broken Asset URLs

If JavaScript or CSS files cannot load, the application may appear broken even when the route itself exists.

FAQ