React Router Error: Not able to load different urls separately other than home page by build on Netlify

Question

I'm a little new to react, so I have come across a problem which is on my personal portfolio website and i don't know how to solve it

the problem is when i open my website it take me to my home page which is fine, and when i go to other pages from my home page it works fine but when i want to go to about page directly than i'm unable to access it.

for example

https://sparsh-saxena.netlify.app/ this is my home page, if I type this as url it works fine

but If I want to open my about page or any other page on my portfolio than It doesn't work like: https://sparsh-saxena.netlify.app/about

It shows-> Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

Any help would be appreciated

Answer 1

In order to support client-side routing with Netlify (which is you actual objective here). You need to support pushState .

To do this you need to create a public/_redirects file with the following rewrite rules:

/* /index.html 200

Now when you build your project for deployment it should work correctly!

TL;DR:

• create a _redirects file in your public folder of your React Project
• give it the following content: /* /index.html 200
• build your project
• deploy it to Netlify