How to replace BrowserRouter with HashRouter in React

Question

Currently I am using BrowserRouter but apprently Git Hub pages won't work with BrowserRouter so we need to use HashRouter. I am having a hard time with this conversion.

This is how it is working locally using BrowserRouter:

import "./App.css";
import { BrowserRouter, Routes ,Route } from 'react-router-dom';
import Home from './components/Home';
import NavigationMenu from "./components/NavigationMenu";
import AboutMe from "./components/AboutMe";
import Game from "./components/Game";

function App() {
  return (
    <BrowserRouter>
    <NavigationMenu/>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/about-me' element={<AboutMe/>}/>
        <Route path='/clicker' element={<Game/>}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

And this is my attempt at using the HashRouter:

import logo from "./logo.svg";
import "./App.css";
// import { BrowserRouter, Routes ,Route } from 'react-router-dom';
import { HashRouter, Routes ,Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import NavigationMenu from "./components/NavigationMenu";
import AboutMe from "./components/AboutMe";
import Game from "./components/Game";

function App() {
  return (
    <HashRouter>
    <NavigationMenu/>
      <Routes>
        <Route path='/about-me' element={<AboutMe/>}/>
        <Route path='/clicker' element={<Game/>}/>
        <Route path='/' element={<Home/>}/>
      </Routes>
    </HashRouter>
  );
}

export default App;

If I navigate to any of my links using the HashRouter, then the URL looks correct but the page never renders my elements. The homepage simply reloads if I navigate to any of the paths.

@yousoumar GitHub pages don't redirect every every request to `index.html` which is the requirement in `BrowserRouter`. The link you posted solves a different issue. — Konrad, Aug 14 '22 at 14:00
@mastercooler6 you have to use `#route/path` syntax with `HashRouter` — Konrad, Aug 14 '22 at 14:01
@KonradLinkowski thanks, I may have missed something. Deleted the comment. — Youssouf Oumar, Aug 14 '22 at 14:02
Not sure I follow. Even if I hardcode it like this: ``, then it still doesn't work/. I get the message `No routes matched location "/" ` in the console — mastercooler6, Aug 14 '22 at 14:04
I just did a quick sandbox and it works here https://codesandbox.io/s/hash-router-eolr9y Maybe compare your code with this and try to find a difference — Irfanullah Jan, Aug 14 '22 at 14:06
Very weird. Yeah I see that the sandbox works and it looks just like my code. If I navigate to any of the links in my code, it still just re-renders the homepage — mastercooler6, Aug 14 '22 at 14:11
Are you manually adding `#` in your `Link`? You don't have to add it yourself — Irfanullah Jan, Aug 14 '22 at 14:12
No, this is an example of one of my links: `About Me` but even if I manually navigate to it in the URL, it just re-renders the homepage — mastercooler6, Aug 14 '22 at 14:14
`Nav.Link` seems to be from react bootstrap.. Doesn't look like the right component to use with react router — Irfanullah Jan, Aug 14 '22 at 14:16
Well shouldn't it still work by just navigating to the path in the URL? — mastercooler6, Aug 14 '22 at 14:16

Irfanullah Jan · Answer 1 · 2022-08-14T14:48:17.697

Please use Link or NavLink component from "react-router-dom". Any other links e.g. Nav.Link from React bootstrap will not work directly with React router.

You have to ensure that the UI component uses react-router interface for the actual navigation action.

With Nav.Link try using it this way:

import {LinkContainer} from 'react-router-bootstrap'

<LinkContainer to="/about-me">
    <Nav.Link>About me</Nav.Link>
</LinkContainer>

Source: https://github.com/remix-run/react-router/issues/83

I believe it is far simpler to not use Nav.Link. Instead, use Link from react-router-dom and manually apply bootstrap classes to achieve the styling.

How to replace BrowserRouter with HashRouter in React

1 Answers1