2018-12-18
Page Not Found on Netlify with React Router
react, netlify
react, netlify
_Photo by Hello I'm Nik on _Unsplash
You might run into the following error after deploying a single page React site using React Router to Netlify.
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
Error message on Netlify
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).
Here is the simplest code using React Router.
https://gist.github.com/dance2die/fae8d963496b66dc2d23f5605d478976
And the error occurring on Netlify when you go to https://<netlify domain>/else directly.
Page Not Found Demo
Netlify offers a special file, _redirects, which you can add to your code base and let Netlify handle how to handle the URL that is not handled on the client-side.
Netlify documentation has a section, History Pushstate and Single Page Apps, which shows you how to redirect to the root of your SPA URL (but doesn't mention React Router, as it applies to other client-side frameworks/libraries).
So to fix the issue, we need to create a file named _redirects to the root of your site with following content.
https://gist.github.com/dance2die/acf9a148ec8025364bf0b6cf37367294
_redirect static file
Change _index.html_ accordingly to match the SPA root.
Here is the working site.
Netlify successfully redirected to the SPA root
For more ways & restrictions for redirect, check out the official Netlify documentation.