React routing works on local machine but not on GitHub pages

Question

I have deployed my React App on Github pages but the routes are not working on Github pages.

Only the base URL is working . If I navigate to any other page then I get error 404.

App.js

<Router>

        <nav role="navigation" id="nav_bar_hamburger">
          <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>

            <ul id="menu">
              <a href="/covid19-tracker"><li>Worldwide</li></a>
              <a href="/india-statewise"><li>India-Statewise</li></a>
              <a href="/coming-soon"><li>Coming Soon</li></a>
            </ul>
          </div>
        </nav>



        <div className="routingContainer">

          <Switch>
            <Route path="/covid19-tracker" component={WorldwideContainer} />
            <Route path="/india-statewise" component={IndianStateWise} />
            <Route path="/coming-soon" component={temp} />
          </Switch>
          <hr />
        </div>
 </Router>

Does BrowserRouter works differently after deploying to Github pages? What's the ideal solution for this?

Answer 1

Your GitHub page tries to serve /covid19-tracker folder or file from the server side instead of looking for routes from your React app. Probably using <HashRouter /> is one of the solutions. So at the end you would have a URL like https://<github-url>/#/covid19-tracker .

So after the base URL's hashtag your React Router is handling the routes accordingly.

You could add as the following in your app instead of <BrowserRouter /> :

<HashRouter>
   <App />
</HashRouter>

Based on the documentation - Read further here:<HashRouter /> :

A <Router> that uses the hash portion of the URL (ie window.location.hash ) to keep your UI in sync with the URL.

As also from the documentation:

As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with <BrowserHistory> instead.

But in this case you probably do not have access to make that modification.

I hope this helps!