Problem when navigating routing

This issue is commonly encountered when deploying single-page applications (SPAs) like React on Netlify. The problem arises because when you navigate to a different route in your application, Netlify tries to serve a file that matches that route. However, in SPAs, all routes are handled by a single index.html file.

To fix this, you need to add a _redirects file to your project with the following content:

/*  /index.html  200

This rule tells Netlify to redirect all routes to the index.html file, which then allows your React router to handle the route correctly.

You should place the _redirects file in the public folder of your React application. After adding the file, you need to redeploy your application on Netlify.

Please take a look at the support guide below as it details this error in greater detail.

You can find more information about redirects in the Netlify documentation.

If you’re using react-router-dom, you might also need to switch from BrowserRouter to HashRouter, as few folks found this solved their routing issues.