Photo by Hello I’m Nik on Unsplash
If you are already using netlify.toml, check out this article,
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.
How did the error occur?
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).
Error Code & Demo
Here is the simplest code using React Router.
And the error occurring on Netlify when you go to https://<netlify domain>/else directly.
How can we fix it?
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.
Change index.html accordingly to match the SPA root.
Here is the working site.
For more ways & restrictions for redirect, check out the official Netlify documentation.
Resources
- Where I found out the answer – How do you handle frontend routing with Netlify and React Router v4? on Reddit.
- _redirects Netlify documentation for SPA.
-
Source code with
_redirectsfile. -
Source code with out
_redirectsfile. - Netlify site with _redirects file.
- Netlify site with out _redirects file.
The post Page Not Found on Netlify with React Router appeared first on Sung's Technical Blog.
Top comments (18)
awesome! you save my day :)
You're welcome & glad that it's saved someone's day (an exactly the purpose of sharing 🙂)
if you use feature deploy on netlify
npm run build && echo "/* /index.html 200" > build/_redirects
Oh, thank you ^^, You know! I create project with (webpack+reactjs). The ways on the forum don't work until I see your instructions
Hi Sung! Thank you for this post. I tried both your suggestion and Halim's suggestion underneath about how to solve this via custom Netlify build command, and neither worked. I'm new to React and Routing so if you could please have a look at my code and see if I could solve this I would appreciate it extremely.
Here is the site: hjp-world.netlify.app
And here is the github repo: github.com/hermesjpappas/react-cou...
If you click on a country and try to refresh the page, you either get a blank white page or a 404 error on Netlify. Again, any help would be appreciated immensely!
EDIT: I suspect it might have something to do with the fact that I am using generated paths using a variable (e.g. path="/:countryCode") along with the useParams hook on the target component. Still, if you have any ideas that'd be great!
Thanks my dude!
You're welcome ✋
Wow, you saved my life been looking for this since a week and finally found
Thanks for letting me know it's still working well :)
and glad that it has helped
Thank you. Just fixed mine!
You're welcome, Njoku~
Once again, the community came to the rescue. Thank you Sung, the article saved me stress
Glad that it helped :)
Thanks a lot, it was so helpul
Thanks man this really helped me
My man Sung M. Kim. Thank you.