Issue with publishing React app to Github pages

Question

Okay, so when I run npm run deploy, all steps followed, it says published... great.

Check Github hosted link and weirdly its literally only showing JUST my navbar component, nothing else. As you can see by the router in the app.js below, it should be showing the navbar element and the RecipeList component. Manually typing routes results in 404.

app.js -

import React from 'react';
import './App.css';
import Navbar from './Component/Navbar/Navbar';
import RecipeList from './Component/RecipeList/RecipeList';
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import RecipeItemDetails from './Component/RecipeItemDetails/RecipeItemDetails';



function App() {
  return (
    <BrowserRouter>
    <Switch>
    <div className="App">
      <Navbar/>
      <Route exact path="/" component={RecipeList} />
      <Route path="/recipes" component={RecipeList} />
      <Route path="/recipes/:id" component={RecipeItemDetails} />
    </div>
    </Switch>
    </BrowserRouter>
  );
}

export default App;

package.json -

{
  "name": "gmcb-react",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://Wrecket.github.io/GMCB-react-conversion",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "save-dev": "0.0.1-security"
  },

Can anyone tell me what amateur mistake im likely making?

Answer 1

I think this article will help which explains a similar problem to which I had deploying against one of my project's ghpage .

Basically, you need to take advantage of <BrowserRouter/> 's basename property for the <Routes/> to work as they do locally up on ghpages, specifically settings the value to;

basename={process.env.PUBLIC_URL}