React Router Page hosted on GitHub Breaks On Refresh

Question

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

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

Answer 1

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);
});

Answer 2

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