Broken Links on Netlify React.js using React Router solution

react #reactrouter #netlify

This solution is for anyone who has deployed a React Single Page Application using Netlify’s hosting services and ran into a ‘Page Not found’ error after refreshing any page that isn’t the default homepage.

You’re probably confused because the said issue does not occur when interacting with the App on the local host server, so what could have gone wrong?

The reason is fairly simple but not too obvious, React Router is set up to handle routing on the browser/client-side. That said, refreshing the website on any page other than the root (all routes are specified at the root level) means that Netlify won’t understand how to handle the specific route.

Solution.

The solution is to create a file and name it ‘redirects’ to the root of our site inside the ‘public’ folder/directory _(path = ‘public/_redirects’) and type in/copy-paste the following;
/* /index.html 200

This works because Netlify offers a _redirects file, which you can add to your codebase along with the rest of your files and folders. This will equip Netlify with the required information in order to handle URLs that are not handled on the browser.

For more details, visit the official Netlify documentation.