从路由内的页面响应路由器v6和相关链接
嗨，我正在尝试使用react路由器更新项目到v6。我了解基本知识，但却在与相关链接进行斗争。
我们有一个页面，它通过'id‘呈现给定项的参考文档。文档可以使用同级id链接到其他“兄弟”材料。换句话说，用户可以在文档中导航而不离开相同的基本路径(由‘id’参数化)。
我做了一个小复写码箱，下面是基本代码。
import React from "react";
import {
BrowserRouter,
Routes,
Route,
Link,
useParams
} from "react-router-dom";
import "./styles.css";
function GenericPage() {
const { id } = useParams();
return (
<div className="page">
<p>Document id: {id}</p>
<div>
Links from within page don't work:
<Link to="./foo" className="link">
Foo
</Link>
<Link to="./bar" className="link">
Bar
</Link>
</div>
</div>
);
}
export default function App() {
return (
<BrowserRouter>
<div>
Working top nav:
<Link to="docs/generic/foo" className="link">
Foo
</Link>
<Link to="docs/generic/bar" className="link">
Bar
</Link>
</div>
<Routes>
<Route path="/docs/generic/:id" element={<GenericPage />} />
</Routes>
</BrowserRouter>
);
}已尝试使用../{id}等，但未获成功。
也许这是出于设计，但不允许使用简单的相对名称链接到同级页面似乎有点奇怪。在常规的web开发中，所有这些都很正常。
回答 3
Stack Overflow用户
发布于 2022-06-07 20:40:28
我有点惊讶，我还没有遇到这个，但它似乎是故意的。有一个讨论这里，你可能会觉得有启发性，或令人沮丧。不过，似乎确实有一些解决办法。
显然，".."的意思是“升一个Route”。当只有一个Route时，代码默认为应用程序在其上呈现的根"/"“路由”。
您可以调整路由以匹配路径结构。
示例：
<Routes>
<Route path="/docs">
<Route path="generic">
<Route path=":id" element={<GenericPage />} />
</Route>
</Route>
</Routes>现在，相对链接似乎像你和我一样起作用，我怀疑还有很多其他的人，希望它们能发挥作用。
function GenericPage() {
const { id } = useParams();
return (
<div className="page">
<p>Document id: {id}</p>
<div>
Links from within page now work:
<Link to="../foo" className="link">
Foo
</Link>
<Link to="../bar" className="link">
Bar
</Link>
</div>
</div>
);
}
Stack Overflow用户
发布于 2022-06-07 20:39:51
您可以将参数化路由嵌套在主路径下，如下所示：
<Routes>
<Route path="/docs/generic" element={<GenericPage />}>
<Route path=":id" element={<GenericPage />} />
</Route>
</Routes>嵌套允许嵌套路径被附加到其父路径的末尾，因此最后一条路径是/docs/generic/:id。
然后，更新页面中的链接，以便只将参数值传递给to支柱，而不是整个路由：
<div>
<Link to="foo" className="link">
Foo
</Link>
<Link to="bar" className="link">
Bar
</Link>
</div>这允许您更改路由器中的实际路由值("/docs/generic")，而不必更新GenericPage组件中的链接。
Stack Overflow用户
发布于 2022-10-05 07:04:15
所有以前的答案是正确的，并很好地说明了反应路由器v6的设计。不过，伊莫。建议的解决方案是变通办法，因此，在这种情况下，链接可以像预期的那样起作用。
然而，在relative=组件中使用<Link />“path”标志要简单得多。见文档
默认情况下，链接相对于路由层次结构，所以..。会上升到一条线路的水平。偶尔，您可能会发现，您有匹配的URL模式，这些模式不适合嵌套，您更喜欢使用相对路径路由。您可以选择使用相对的
如果呈现<Link />组件的组件与“最后”路由元素不相同，这也具有很大的优势，而布局组件通常也是如此。
在您的例子中，只需替换
<Link to="./foo" className="link">通过
<Link to="./foo" relative="path" className="link">https://stackoverflow.com/questions/72537159
复制相似问题
腾讯云开发者
