React app HashRouter not working on localhost as well as Github User page

Question

I'm creating a blog in React to be deployed on GitHub Pages.

Problem

1. Created my React app and added BrowserRouter for navigation, everything was working fine on localhost and the app successfully deployed on the GitHub Pages.
2. Even though Home page was accessible on GitHub Pages, if I click on any link there was 404 Error. The problem was BrowserRouter does not work with GitHub pages.
3. After some research I added HashRouter in my react app as BrowserRouter was not working on GitHub pages.
4. With HashRouter again Homepage is loaded successfully but if I click on link that should take me from home to blog section the expected behaviour should have been something like this localhost:3000/#/blog but the url changes to something like localhost:3000/blog#/ and I'm still on homepage.
5. Problem 4 is true for both localhost as well as Github Pages

6. But if I manually enter the url localhost:3000/#/blog it works perfectly fine and loads the Blog component as expected. Similar behaviour on the GitHub Pages.

   Home.js

import React from 'react';
import { Component } from 'react';
import HODL from './HODL';
import Header from './Header';
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import Jargons from './Jargons';

class Home extends Component {

  render () {

    return (
      <Router basename={process.env.PUBLIC_URL + "/"}>
        <Header />
        <Switch>
          <Route path="/" exact component={HODL} />
          <Route path="/blog" component={Blog} />
          <Route path="/tutorials/javascript" component={JavaScript} />
          <Route path="/tutorials/solidity" component={Solidity} />
          <Route path="/jargons" component={Jargons} />
        </Switch>
      </Router>
    );
  }
}

export default Home;

Works same with or without basename={process.env.PUBLIC_URL + "/"}

Package.json

{
  "name": "block-by-block.github.io",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://block-by-block.github.io",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "bootstrap": "^4.4.1",
    "gh-pages": "^2.1.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "react-bootstrap": "^1.0.0",
    "react-markdown": "^4.3.1",
    "react-router-dom": "^5.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

PS : Complete source code is available at Github link and the app is deployed here React App

Answer 1

So I found the issue lies in your Header component. You are using bootstrap which is not compatible with react-router-dom. For more information, kindly look it up on google.

Here is what you should change:

import { Link } from "react-router-dom";

<Nav.Link as={Link} to="/jargons">
   Jargons that works!
</Nav.Link>