GH Pages loading incorrect React Router Page?

Question

I have a small React app that when deployed with GH-Pages is loading my error component on page load as opposed to my home page?

Could anyone please explain why this is?

Route

<Router>
     <Navbar />
     <Switch>
       <Route exact path = "/">
         <Home />
       </Route>
       <Route path = "/about">
         <About />
       </Route>
       <Route path = "/cocktail/:id">
         <SingleCocktail />
       </Route>
       <Route path = "*">
         <Error />
       </Route>
     </Switch>
   </Router>

Answer 1

Due to the server config of GitHub pages you will need to use the HashRouter in your app. Your GitHub pages url will likely come with a path after the main URL which is why the * is triggered in your route.

To do this all you have to do is replace the router you import right now with HashRouter:

Instead of:

// import { Router, Switch, Route } from 'react-router-dom';

You change it to:

import { HashRouter as Router, Switch, Route } from 'react-router-dom';

The rest of your code can remain as is. (Most likely)