React Router + Netlify: Page Not Found

How to reproduce the error?

Assuming that you have a web-app with domain example.com, routing implemented using React Router. Website is hosted on Netlify

• When trying to access example.com, page loads normally
• However, when try to access route example.com/route-name, page is not found even though there is such Route set up

What causes the error?

React Router handles routing on the client side (browser) so when you visit non-root page (e.g. https://yoursite.netlify.com/else), Netlify (server-side) does not know how to handle the route. (As your routes are set up in the root level).

How to fix the error?

To fix the issue, we need to create a file named _redirects to the root of your site with following content.

1
/*    /index.html   200

Resources

• https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps
• https://sung.codes/blog/2018/12/18/page-not-found-on-netlify-with-react-router/