为什么我的动态路由会使用带有路由参数的 Hooks 中断？

Question

我在业余时间一直在学习 React，为此我正在构建一个项目管理门户。我在 "/" 有一个仪表板路由设置，在 "/projects" 有一个项目路由设置。我想为单个项目创建动态路由，因此将此路由定义为 "/projects/:id"。

当通过 Home > Projects > [Single Project] 这样的导航时，该路线正在工作。这样就成功加载了单个项目组件。

问题是，当我在单个项目上（URL 示例“/projects/test-project”）时，主导航会中断，侧边栏中的每个链接现在都以“/projects”开头。因此，当在单个项目中并单击主导航时，链接将指向：

• /projects/仪表板
• /项目/项目
• /项目/任务
• /项目/联系人

这几乎就像在单个页面上时，基本 URL 被提升了一个级别；因此，当在单个项目上时，侧边栏中的所有链接都基于“项目”的相对路径。

您可能会说，我发现这个问题很难解释。我已经查看了有关此的各种教程，看起来我做的一切都是正确的。大多数教程都是针对 React 4 的，所以使用类组件 - 我已经经历了很多假设，所以我可以提供任何东西来进一步解释问题或解决问题，我很乐意提供。

我正在使用功能组件和钩子构建应用程序，物有所值。到目前为止，就我在 React 方面的进展而言，这是让我感到困惑的最大事情，所以任何关于这方面的指导都会有很大的帮助。

编辑

这是我的设置示例，它显示了我遇到的问题：https://codesandbox.io/s/funny-mendeleev-ru5vt

所以如果我点击主导航，一切似乎都正常。如果我导航到一个项目，它会破坏除仪表板之外的所有其他链接。想不出来这个。

Answer 1

我认为您正在寻找 嵌套路由，因为您正在使用反应挂钩，请更改您的路由配置如下

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch
} from "react-router-dom";
function Topic() {
  let { topicId } = useParams();
  return (
    <div>
      <h3>{topicId}</h3>
    </div>
  );
}
function Topics() {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/foo`}>Foo</Link>
        </li>
        <li>
          <Link to={`${url}/bar`}>Bar</Link>
        </li>
        <li>
          <Link to={`${url}/baz`}>Baz</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
      </Switch>
    </div>
  );
}
function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>
        <hr />
        <Switch>
          <Route exact path="/">
            <p>Home</p>
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

更新：

工作演示here

Answer 2

我找到了答案。这非常简单——我没有在导航链接的开头使用正斜杠。路由器工作正常，但只需要添加斜线。

有时这确实是最简单的事情。感谢所有帮助过的人！