Using react-router-dom, BrowserRouter never works and HashRouter only sometimes works. Why?

Question

I am new to React and react-router-dom and they are throwing me through a loop.

Currently, HashRouter works as expected in development mode and in production using Github pages:

import React from 'react';
import './css/main.css';
import { BrowserRouter, HashRouter, Switch, Route } from 'react-router-dom';
import AboutMe from './components/pages/AboutMe';
import MyWork from './components/pages/MyWork';
import HowToReachMe from './components/pages/HowToReachMe';
import LandingPage from './components/pages/LandingPage';

export default function App() {
  return (
    <HashRouter>
      <Switch>
        <Route exact path="/" component={LandingPage} />
        <Route path="/AboutMe" component={AboutMe} />
        <Route path="/MyWork" component={MyWork} />
        <Route path="/HowToReachMe" component={HowToReachMe} />
      </Switch>
    </HashRouter>     
  );
}

However, using BrowserRouter leads to a blank grey or white page with no errors:

  return (  
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route path="/AboutMe" component={AboutMe} />
          <Route path="/MyWork" component={MyWork} />
          <Route path="/HowToReachMe" component={HowToReachMe} />
        </Switch>
      </BrowserRouter>
  );

Now when I try to use my custom domain with github pages I get a blank white page with no errors using both BrowserRouter or HashRouter. I am confident that I set the Domain up correctly because you can still view the head tag using dev tools (https://connor-mote.com/).

Why won't BrowserRouter or HashRouter work with a custom domain using GitHub pages?

Github Repo Link

Answer 1

While doing like path=\, in deploy it comes to exist on 'yourBaseAdress\' +'\', Just add basename to Router

---

 <BrowserRouter basename={process.env.PUBLIC_URL}>
     {/* routes */}
 </BrowserRouter>