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.
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.
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.
- Where I found out the answer – on Sung Codes.
- _redirects Netlify documentation for SPA.
Source code with
- Netlify site with _redirects file.
The post Page Not Found Error on Netlify Reactjs React Router solved appeared first on Rajesh Royal.