So you made a Single Page Application and It’s working great on localhost npm or yarn server. And now you made a build of this site and deploy it to the Netlify.
nooo… I got an error.
Page Not Found
Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.
Many might run into the following error after deploying a single page React site using React Router to Netlify.
How did the error occur?
React Router handles routing on the client-side (browser) so when you visit the non-root page (e.g.
https://yoursite.netlify.com/login), Netlify (server-side) does not know how to handle the route.
(As your routes are set up in the root level).
And the error occurring on Netlify when you go to https://<netlify domain>/route directly.
How can we fix it?
Netlify offers a special file, _redirects, which you can add to your codebase and let Netlify 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 our site [public folder of App] with the following content.
/* /index.html 200
Here is the working example site: React Todo App with firebase Authentication.
For more ways & restrictions for redirect, check out the official Netlify documentation.
Resources
- Where I found out the answer – on Sung Codes.
- _redirects Netlify documentation for SPA.
-
Source code with
_redirectsfile. - Netlify site with _redirects file.
The post Page Not Found Error on Netlify Reactjs React Router solved appeared first on Rajesh Royal.
Top comments (72)
Thanks for this, Rajesh! You definitely put me on the right track. I found the _redirects file didn't seem to like working with my netlify.toml, which I was already using to redirect API calls to my backend. I found this sample code to add to my netlify.toml file in the Netlify documentation:
[COMMENT] The following redirect is intended for use with most SPAs that handle routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Link to documentation here: docs.netlify.com/configure-builds/...
Tip: scroll through the sample file that is provided or use find on your browser as it is kind of lost in a sea of other sample code.
Thanks @mellim
This detailed comment is definitely going to help somebody.
this did work for me when i deployed it on Netlify platform, but failed to work when deployed the same static site on Render platform. Can you explain, how to solve the issue while deploying on render platform
I never worked with this platform before.
This was my solution. Thanks a lot, Mel!
I tried this and still did not work
Maybe you missed any config or having some other issue with project. please provide more information so people from comments can also help. Thanks.
For me too.
Thanks thats saved me haha
you're welcome 😀
Thank you so much for this fix. This is a really useful tip.
very helpful
Thanks! Worked awesome.
I had missed the note to add
_redirectstopublic/folder. Fixed and good!This is very helpful, thank you!
Hey, Rajesh! You helped me a lot! Thank you very much!
this worked for me! thank you :-)
You are a life saver!!! Thanks from the bottom of my heart <3
Your welcome sir 😉