Why Is My React App Showing a 404 After Deployment?

When a React app works perfectly on your computer but shows a 404 after deployment, the problem is usually not your React components. In many cases, the hosting server does not know how to handle the client-side routes created by React Router.

For example, your homepage may work at https://example.com/ but opening https://example.com/about may return a 404. This guide explains why that happens and what you can check to fix it.

Why Does a React App Work Locally but Show 404 After Deployment?

React applications often use client-side routing. Your React application can decide that / should display the home page, /about should display the About page, and /contact should display the Contact page.

During development, the React development server usually knows how to send these requests back to your application. A normal web server may behave differently. When someone directly visits /about, the server may look for a physical /about file or directory. If it does not exist, the server returns 404 before React gets a chance to handle the route.

First Check: Does the Homepage Work?

Open your deployed website. If the homepage works but refreshing another route produces a 404, your React application may be fine. Try these steps:

1. Open your homepage.
2. Navigate to another page using the website's navigation.
3. Refresh that page.
4. Copy that page's URL.
5. Open the URL directly in a new browser tab.

If navigation works but direct access fails, the problem is very likely related to server-side routing.

Check Your React Router Configuration

If your application uses React Router, check that your routes are defined correctly. A typical application might contain routes such as /, /about, /contact, and /dashboard. The React application handles those routes in the browser. The important part is making sure your hosting environment also knows that requests should be sent to the application's entry point.

Make Sure You Deployed the Production Build

Before troubleshooting the server, make sure you actually deployed your production build. For many React projects, the command is npm run build. Depending on your setup, the output may be placed in dist or build. Check your project's build configuration instead of assuming which folder is correct.

Do not upload your entire development project unless your hosting platform specifically requires it.

Check Whether Your Hosting Supports SPA Routing

A single-page React application needs the server to return the application's main HTML file when a client-side route is requested. For example, if someone requests /dashboard, the server may need to return your React application's index.html. React can then inspect the URL and render the correct page. Without this fallback behavior, the server can return a 404.

Test a Direct URL

After changing your hosting configuration, test the actual route. For example, open your homepage, navigate to /about, refresh the page, copy the /about URL, open it in an incognito window, and check whether it loads. Also test another route such as /contact. If multiple routes now work when opened directly, your routing configuration is probably correct.

Check Case Sensitivity

A less obvious problem can occur when paths are written with different capitalization. For example, /About and /about may not be treated as the same URL in every environment. Use consistent route definitions and links throughout your application.

Check Your Build Output

If the entire application returns a 404, not just individual routes, inspect the deployment itself. Check whether the build completed successfully, whether the correct output directory was uploaded, whether index.html exists in the deployed location, whether static assets are being served, and whether your domain points to the correct deployment.

A routing problem usually affects individual routes, while an incorrect deployment can affect the entire application.

What If React Routes Work Through Navigation but Not on Refresh?

This is the classic single-page application routing problem. The browser already has your React application loaded when you click a link. React handles the navigation internally. When you refresh the browser, however, the browser requests the URL from the server again. The server needs to know how to handle that URL. If it does not, you get a 404.

A Simple Troubleshooting Order

Try these checks in this order: confirm the production build works locally, confirm the correct build folder was deployed, confirm the homepage loads, test another route through navigation, refresh that route, open the route directly in a new tab, check SPA fallback configuration, check your hosting configuration, check the browser console for asset errors, and re-deploy after correcting the configuration.

This sequence helps separate a React problem from a hosting problem.

FAQ