[英]React Router Dom v6 HashRouter basename not working
i want to use that Hashrouter, but when i try, i got this error:我想使用那个 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.
i put "Homepage": "./admin" in packedjson我把“主页”:“./admin”放在packedjson中
but when i use BrowserRouter, its render normaly, can anyone explain why, please?但是当我使用BrowserRouter时,它的渲染正常,谁能解释一下为什么?
The code i'm using to try to understand router v6:我用来尝试理解路由器 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>
);
}
There mostly seems to be a misunderstanding with how the basename
prop is applied in the router, specifically the HashRouter
.似乎对如何在路由器中应用
basename
属性存在误解,特别是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.对于
HashRouter
, basename
属性是一个应用于应用程序正在处理的路径的值,而不是应用程序服务/运行的域路径。
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, ie it's applied to everything after the hash.换句话说,
basename
属性值应用于 URL散列而不是URL 路径,即它应用于散列之后的所有内容。
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.如果您希望
"/admin"
在散列之前显示,那么这是整个应用程序部署和提供服务的一部分。 In this case the app needs to be deployed to mysite.com
in a "/admin"
subdirectory.在这种情况下,需要将应用程序部署到
mysite.com
的"/admin"
子目录中。 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.如果您不希望在应用程序的路由中显示额外的
"/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>
update: Not a solution =[ basename not works in Routes, and hashrouter not working with basename更新:不是解决方案 =[ basename 在 Routes 中不起作用,并且 hashrouter 不适用于 basename
Some solution here:这里有一些解决方案:
https://github.com/remix-run/react-router/issues/7128#issuecomment-582591472 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在这里工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.