React router v6 和路由内页面的相关链接

Question

您好，我正在尝试使用 React Router 将项目更新到 v6。我了解了基础知识，但在相关链接方面遇到了困难。

我们有一个页面，通过“id”呈现给定项目的参考文档。该文档可以使用同级 ID 链接到其他“同级”材料。换句话说，用户可以在文档中导航，而无需离开相同的基本路线（由“id”参数化）。

我在codesandbox上做了一些重现，下面是基本代码。

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}等但无济于事。

也许这是设计使然，但不允许使用简单的相对名称链接到同级页面似乎有点奇怪。在常规网络开发中一切都很正常。

Answer 1

我有点惊讶我还没有遇到过这个，但这似乎是设计使然。这里有一个讨论，您可能会觉得很有启发，也可能会感到沮丧。不过，似乎确实有一些解决方法。

显然是".."“上一层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>
  );
}