During my journey after completing learning React, I’ve been working on side projects and I always use React Router for SPA. By the way, I had this issue(below) everytime I deploy them on netlify just when I try to refresh the website or just navigate to the specific path.
So in this article, I did my research that I'm going to share with you to get over this issue, then navigate your website or SPA without any issues out of your codes
When does it show up
This issue shows up every time you try to refresh your website or anytime you want to navigate through a specific path indirectly, i mean by modifying the address. This issue occurs because netlify, by default, expects server-side routes rather than client-side routes.
How to solve it
So to solve this issue you have to set a redirect rule to netlify. Just go to your project, in which you used react-router, then in your public folder create a file and name it _redirects (without any extension).
After the creation, just click on that file then write down this line of code.
/* /index.html 200
Just this rule ensures that all requests are directed to your react application’s entry point, allowing react-router to handle the routing correctly.
Make sure that the _redirects file is placed in the public folder, netlify will automatically recognizes and uses this file during the deployment process to handle custom redirect rules. The file have to be in the version of your project on netlify in order to get detected by netlify.
Follow me for more tips and tricks, HAPPY CODING ;)
Top comments (0)