Search code examples
javascriptreactjsreact-routernetlify

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

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

Solution

  • 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