Why is HashRouter not working when BrowserRouter works?

Question

I want to deploy my react code to github pages, but apparently, it doesn't support BrowserRouter. I later found out that I need to use HashRouter, but for some reason, the page doesn't work. It only has to root div and nothing else renders. I tried rendering a single page, but that didn't work either.

Code for BrowserRouter:

import Home from './pages/Home.js'
import Skills from './pages/Skills.js'
import Test from './pages/test.js'
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import Attributions from './pages/Attributions.js';
import { Social } from './pages/Social.js';
import { Experience } from './pages/Experience.js';
import { Projects } from './pages/Projects.js';
import Chart from './components/Chart.js';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home/>} />
        <Route exact path="/Skills" element={<Skills/>} />
        <Route exact path="/Attributions" element={<Attributions/>} />
        <Route exact path="/Experience" element={<Experience />} />
        <Route exact path="/Projects" element={<Projects />} />
        <Route exact path="/Socials" element={<Social/>} />
        <Route exact path="/test" element={<Test/>} />
        <Route exact path="/Chart" element={<Chart/>} />
      </Routes>
    </BrowserRouter>
    
  );
}

export default App;

Code for HashRouter:

import Home from './pages/Home.js'
import Skills from './pages/Skills.js'
import Test from './pages/test.js'
import {
  HashRouter,
  Routes,
  Route
} from "react-router-dom";
import Attributions from './pages/Attributions.js';
import { Social } from './pages/Social.js';
import { Experience } from './pages/Experience.js';
import { Projects } from './pages/Projects.js';
import Chart from './components/Chart.js';
function App() {
  return (
    
    <HashRouter>
      <Routes>
      <Route exact path="/" component={Home}/>
      <Route exact path="/Skills" component={Skills} />
      <Route exact path="/Attributions" component={Attributions} />
      <Route exact path="/Experience" component={Experience} />
      <Route exact path="/Projects" component={Projects} />
      <Route exact path="/Socials" component={Social} />
      <Route exact path="/test" component={Test} />
      <Route exact path="/Chart" component={Chart} />
      </Routes>
    </HashRouter>
  );
}

export default App;

All of the code is here https://github.com/kakhil2004/Portfolio

I think hash router uses `#` to detect url changes, means you need to visit either `https://example.com/#Experience` or `https://example.com/Experience/#` to navigate to `Experience` page. — bogdanoff, Aug 12 '22 at 07:02
Does this help answer your question? https://stackoverflow.com/a/71985764/8690857 — Drew Reese, Aug 12 '22 at 07:43

score 1 · Accepted Answer · answered Aug 12 '22 at 07:50

For hosting your app on Github pages you do need to use a HashRouter and ensure your package.json file specifies a homepage that matches where the app is hosted. I see that yours has "homepage": "http://kakhil2004.github.io/Portfolio", so double check that it's correct.

Even though you are using a HashRouter the react-router-dom@6 Route components still need to render their content on the element prop as JSX.

Example:

<HashRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/Skills" element={<Skills />} />
    <Route path="/Attributions" element={<Attributions />} />
    <Route path="/Experience" element={<Experience />} />
    <Route path="/Projects" element={<Projects />} />
    <Route path="/Socials" element={<Social />} />
    <Route path="/test" element={<Test />} />
    <Route path="/Chart" element={<Chart />} />
  </Routes>
</HashRouter>

Why is HashRouter not working when BrowserRouter works?

1 Answers1

Linked