Скачать или смотреть Solving the 404 Error with React Router v5 on Direct URL Access and Page Refresh

Learn how to fix `404` errors in your React Router v5 application when refreshing pages or navigating directly to routes. Get step-by-step guidance to ensure your app works seamlessly.
---
This video is based on the question https://stackoverflow.com/q/68226464/ asked by the user 'Sergio Ivanuzzo' ( https://stackoverflow.com/u/5397119/ ) and on the answer https://stackoverflow.com/a/68330859/ provided by the user 'Sergio Ivanuzzo' ( https://stackoverflow.com/u/5397119/ ) 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 Router v5: 404 when use url directly or refresh page on route different from "/"

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 Errors with React Router v5 on Page Refresh and Direct URL Access

When building a single-page application (SPA) with React Router v5, users may encounter frustrating 404 errors when attempting to refresh the page or directly access routes other than /. This situation can lead to a suboptimal user experience and confusion. Thankfully, there are effective solutions to this common issue.

In this guide, we will walk through the problem before delving into a well-structured solution that will allow your app to handle page refreshes and direct link navigation seamlessly.

Understanding the Problem

The Scenario

Imagine you have a React application using React Router v5. Your app works well when you navigate within it, but when you refresh the page while on a route like /test/route or try to open that URL directly in the browser, you receive a 404 error.

This issue arises because web servers typically do not know how to handle requests for routes managed internally by a front-end framework like React. Therefore, they return a 404 error instead of serving your application.

What You Tried

Here’s a summary of the steps you took to resolve this issue:

Tried using HashRouter instead of BrowserRouter, but the problem persisted.

Added an .htaccess file with specific rules aimed at redirecting to the index.html, yet it did not resolve the issue.

Attempted using <base href="/"> in the index.html, which also didn't help.

A Step-by-Step Solution

After exploring various alternatives, here’s a comprehensive solution that works:

1. Use HashRouter

As you have explored, changing from BrowserRouter to HashRouter can be beneficial in certain deployment scenarios, particularly for static file servers. Here’s how to implement it:

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

However, you found that this still led to an issue with redirections.

2. Implementing Redirecting Logic

To handle the redirection correctly, you need to introduce some additional logic using the useEffect hook. Here's how to do it:

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

Explanation of the Code:

useHistory and useLocation are React Router hooks that give you access to the history instance and current location.

The useEffect hook runs the provided function after the component mounts. In this case, it attempts to redirect to the current pathname after a brief timeout.

3. Handling Hash Changes

If you also need to manage hashes in your URLs (i.e., for scrolling to certain elements), here’s an updated effect that takes care of that:

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

Explanation of the Extended Code:

This code checks if there's a hash in the URL; if so, it navigates to it while smoothly scrolling to the specified element, offsetting the scroll position.

Conclusion

By employing a combination of HashRouter, leveraging React Router hooks, and adding logic to handle direct URL access and refreshing, you can effectively eliminate the 404 errors users face. With this implementation, your users can refresh their browser on any route or use direct links without any disruptions.

Implementing these solutions will ensure a smoother, more reliable user experience with your React application. Happy coding!