React Router Dom v6 HashRouter 基本名称不起作用

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.

我把“Homepage”：“./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在路由器中应用 prop，尤其是HashRouter. prop是一个应用于应用程序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>

换句话说，basenameprop 值应用于 URL哈希而不是URL 路径，即它应用于哈希之后的所有内容。

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

如果您希望"/admin"在哈希之前显示，那么这是整个应用程序部署和提供服务的部分。在这种情况下，需要将应用程序部署到子目录mysite.com中"/admin"。如果您不希望在应用程序的路由中显示basename="/admin"附加内容，您也不需要指定。"/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

更新：不是解决方案=[基本名称不适用于路由，并且 hashrouter 不适用于基本名称

这里有一些解决方案：

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

在这里工作

SANDBOX