React Router Dom v6 HashRouter basename not working

Question

i want to use that Hashrouter, but when i try, i got this error:

<Router basename="/admin"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.

i put "Homepage": "./admin" in packedjson

but when i use BrowserRouter, its render normaly, can anyone explain why, please?

The code i'm using to try to understand router v6:

import "./styles.css";
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate,
  Outlet,
  Link,
  HashRouter,
} from "react-router-dom";

const ProtectedRoutes = () => <Outlet />;

const Configuration = () => <h1>Configuration</h1>;
const SummaryPage = () => <h1>SummaryPage</h1>;
const Dashboard = () => <h1>Dashboard</h1>;
const Appointments = () => <h1>Appointments</h1>;
const NotFound = () => <h1>NotFound</h1>;

export default function App() {
  return (
    <HashRouter basename="/admin">
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Link to="/dashboard" className="link">
          Home
        </Link>
      </div>
      <Routes>
        <Route path="/configuration/configure" element={<Configuration />} />
        <Route path="/configuration" element={<SummaryPage />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/appointments" element={<Appointments />} />
        <Route path="/" element={<Navigate replace to="/configuration" />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </HashRouter>
  );
}

Answer 1

There mostly seems to be a misunderstanding with how the basename prop is applied in the router, specifically the HashRouter. With the HashRouter the basename prop is a value that is applied against the paths the app is handling, not against the domain path where the app is served/running.

Example:

<HashRouter basename="/admin">
  <Link to="/dashboard" className="link"> // renders <a href="#/admin/dashboard">
    Dashboard
  </Link>
  ...
  <Routes>
    <Route path="/configuration">
      <Route path="configure" element={<Configuration />} />
      <Route index element={<SummaryPage />} />
    </Route>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/appointments" element={<Appointments />} />
    <Route path="/" element={<Navigate replace to="/configuration" />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
</HashRouter>

In other words, the basename prop value is applied to the URL hash and not the URL path, i.e. it's applied to everything after the hash.

mysite.com/someSubdomain/#/admin   /something / ... more nested paths
|--domain-|--subdomain--|#|--------------hash-----------------|
|         |             | |basename| app path | ... app subpaths

If you are wanting the "/admin" to show up prior to the hash, then this is part of where the entire app is deployed to and served up from. In this case the app needs to be deployed to mysite.com in a "/admin" subdirectory. You also won't need to specify the basename="/admin" if you don't want an additional "/admin" to show up in the app's routing.

mysite.com/admin/#/something

...

<HashRouter>
  <Link to="/dashboard" className="link"> // renders <a href="#/dashboard">
    Dashboard
  </Link>
  ...
  <Routes>
    <Route path="/configuration">
      <Route path="configure" element={<Configuration />} />
      <Route index element={<SummaryPage />} />
    </Route>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/appointments" element={<Appointments />} />
    <Route path="/" element={<Navigate replace to="/configuration" />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
</HashRouter>

Answer 2

update: Not a solution =[ basename not works in Routes, and hashrouter not working with basename

Some solution here:

https://github.com/remix-run/react-router/issues/7128#issuecomment-582591472

but i don't know if it's the best one.

// url where new router is created: https://my-site/who/users
const RootModule = () => {
  return (
    <main>
      <BrowserRouter>
        <Routes basename="who/users">
          <nav>
            <Link to="">Home</Link>
            <Link to="who/users/about">About</Link>
            <Link to="who/users/users">Users</Link>
          </nav>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="who/users/about" element={<About />} />
            <Route path="who/users/users" element={<Users />} />
          </Routes>
        </Routes>
      </BrowserRouter>
    </main>
  );
};

and here working

SANDBOX