React Router Dom v6 HashRouter basename not working

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.

我放了"主页";在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,basenameprop是针对应用程序正在处理的路径应用的值，而不是针对应用程序服务/运行的域路径。

的例子:

<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哈希和notURL路径，即它应用于散列之后的所有。

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

如果你想要"/admin"在哈希之前显示，那么这是整个应用程序部署和服务的一部分。在这种情况下，应用程序需要部署到"/admin"子目录下的mysite.com。如果你不希望在应用的路由中显示额外的"/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不是工作路线,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>
);
};

和here working

沙箱