Скачать или смотреть Resolving 404 Not Found Issues with React Router on Deployment

Learn how to solve the `404 not found` errors in your React application with nested routes when deployed on GitHub pages or similar hosting.
---
This video is based on the question https://stackoverflow.com/q/70511861/ asked by the user 'SumakuTension' ( https://stackoverflow.com/u/7528024/ ) and on the answer https://stackoverflow.com/a/70512111/ provided by the user 'Richard Hpa' ( https://stackoverflow.com/u/8218203/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React BrowserRouter works when navigating on localhost. Refreshing a not-home-page when deployed throws 404 not found

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Fixing 404 Not Found Issues in React Router on Deployment

When building applications with React and the React Router library, developers often face a common problem: navigating directly to a non-homepage (like /blog) results in a 404 Not Found error after deployment. This issue can be frustrating, especially when everything seems to work perfectly on localhost. In this guide, we’ll explore the reason behind this problem and provide a clear step-by-step solution.

Understanding the Issue

In a React application utilizing react-router-dom, routing is handled on the client side. However, when you refresh the page or enter a URL directly in the browser, the server attempts to find the corresponding resource. If the server isn't set up to handle these routes correctly, it returns a 404 Not Found error.

Why It Works Locally but Not in Production

When you develop locally, your development server (like webpack-dev-server) understands how to handle these client-side routes. However, when you deploy your app to a platform like GitHub Pages, the server does not understand those routes unless they’re explicitly defined. This is why refreshing a page or manually entering a URL often leads to a 404 error.

Steps to Solve the Issue

Modify the App.js File:

Remove the exact prop from the Blog route so that it doesn’t restrict your routing to only the exact match.

[[See Video to Reveal this Text or Code Snippet]]

Refine the Blog.js File:

You should only have one <BrowserRouter> in your application, which belongs in the App.js file. Remove the second <BrowserRouter> within the Blog.js file and replace it with <Switch>.

Update the paths in the Route components as follows. Since the Blog component is nested within the /blog route, you do not need to include the /blog prefix in the child routes:

[[See Video to Reveal this Text or Code Snippet]]

Important Notes

These changes apply to react-router-dom version 5. If you are using version 6, alternative adjustments will be needed due to changes in the routing API.

Always ensure your deployment setup is correctly configured to serve your single-page application. When using GitHub Pages, you may need to set up a custom 404.html page to redirect appropriately.

Conclusion

By understanding the structure of your routes and accurately configuring your application, you can eliminate 404 Not Found errors when deploying your React application. Ensure that your routing setup is correct and that you only use one <BrowserRouter> in your entire app for it to function as intended on deployment.

This straightforward solution can save you a lot of time troubleshooting routing issues in your React applications. Happy coding!