0

I have deployed a react app on GitHub the issue is when refresh is done on any of its routed pages I get 404 not found error

enter image description here

though when the app is in development mode the pages refreshes properly

Link to the Published App

i am using switch for routing

< Switch >
  <
  Route exact path = "/"
component = {
  Home
}
/> <
Route exact path = "/todo"
component = {
  Issuetracker
}
/> <
Route exact path = "/weather"
component = {
  Weather
}
/> <
/Switch>

Kindly suggest way to fix it

James Z
  • 11,838
  • 10
  • 25
  • 41
LpT
  • 148
  • 12

2 Answers2

0

Usually it happens due to incorrect configurations in the nodejs server. You supposed to serve your react index.html file on every route (otherwise - you will get a 404 error). Like this:

app.get('/*', (req, res) => {
  const indexHtmlPath = path.join(__dirname, '..', 'build', 'index.html');
  res.sendFile(indexHtmlPath);
});
ינון רחמים
  • 217
  • 1
  • 7
  • thanks for answering but for deploying to git i have not used NodeJS or express js , only gh-pages are used can u plz tell in which file i need to place ur code – LpT Apr 02 '21 at 08:11
  • I unerstand... Here there is a trick - https://stackoverflow.com/questions/46056414/getting-404-for-links-with-create-react-app-deployed-to-github-pages (first answer). But, with your own server it is much more easy and clean. – ינון רחמים Apr 02 '21 at 08:21
0

I was able to fix it by replacing browse route with hash route

LpT
  • 148
  • 12