React Router Dom v6 HashRouter basename 不起作用

Question

我想使用那個 Hashrouter，但是當我嘗試時，我得到了這個錯誤：

<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.

我把“主頁”：“./admin”放在packedjson中

但是當我使用BrowserRouter時，它的渲染正常，誰能解釋一下為什么？

我用來嘗試理解路由器 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

似乎對如何在路由器中應用basename屬性存在誤解，特別是HashRouter 。 對於HashRouter ， basename屬性是一個應用於應用程序正在處理的路徑的值，而不是應用程序服務/運行的域路徑。

例子：

<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>

換句話說， basename屬性值應用於 URL散列而不是URL 路徑，即它應用於散列之后的所有內容。

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

如果您希望"/admin"在散列之前顯示，那么這是整個應用程序部署和提供服務的一部分。 在這種情況下，需要將應用程序部署到mysite.com的"/admin"子目錄中。 如果您不希望在應用程序的路由中顯示額外的"/admin" ，您也不需要指定basename="/admin" 。

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

更新：不是解決方案 =[ basename 在 Routes 中不起作用，並且 hashrouter 不適用於 basename

這里有一些解決方案：

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

但我不知道它是否是最好的。

// 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>
  );
};

在這里工作

沙盒