CODEWITHSUNDEEP
javascriptreactjsreact-routernetlify
Sparsh Saxena
Sparsh Saxena

Reputation: 23

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

Upvotes: 0

Views: 285

Answers (1)

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10618

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

Upvotes: 1

Related Questions