无法使用 react-router-dom 5.2.0 编码嵌套路由？

Question

我正在尝试使用 react-router-dom 5.2.0 在 React 中访问具有嵌套路由的子组件。 在这里你可以找到项目的CodeSandbox link：https://codesandbox.io/s/nested-routes-8c7wq?file=/src/App.js

首先，让我向您展示我的页面的树结构。

• 首页
• 关于
• 组织
  • 主要内容
  • 第二内容

主要页面（主页、关于、组织）的路径在 src/routes 文件夹中。 所以他们的 link 看起来像：

• https://localhost:3000/（家庭版）
• https://localhost:3000/about（关于）
• https://localhost:3000/organizations（对于组织）

至此，对我来说一切都很好。嵌套部分有问题..

在“组织”页面上，我必须能够在 MainContent 和 SecondContent 之间切换。 因此进入该页面的 links 必须如下所示：

• https://8c7wq.csb.app/organizations/maincontent
• https://8c7wq.csb.app/organizations/secondcontent

但是我无法打印任何这些内容...

Answer 1

如果您想构建嵌套路径，您应该使用当前路由匹配中的 path 和 url，并从那里构建嵌套路由和 link。

src/pages/Orgainizations

import { Switch, Route, useRouteMatch } from "react-router-dom";

const Organizations = (props) => {
  const { path, url } = useRouteMatch(); // <-- get current path and url
  const [value, setValue] = useState("");

  const menuLinks = {
    data: [
      {
        id: 0, // <-- fix React key issue in NavBar
        title: "Whosebug",
        to: `${url}/maincontent` // <-- build nested link
      },
      {
        id: 1, // <-- fix React key issue in NavBar
        title: "BitBucket",
        to: `${url}/secondcontent` // <-- build nested link
      }
    ]
  };

  return (
    <div>
      <NavBar changeValue={(value) => setValue(value)} menuLinks={menuLinks} />
      <div>
        <Switch>
          <Route
            render={() => <MainContent title={value} />} // *
            exact
            path={`${path}/maincontent`} // <-- build nested path
            strict
          />
          <Route
            render={() => <SecondContent title={value} />} // *
            exact
            path={`${path}/secondcontent`} // <-- build nested path
            strict
          />
        </Switch>
      </div>
    </div>
  );
};

* 请注意，我通过 render 道具而不是 component 道具转换为渲染路由组件。当您使用匿名函数渲染组件时，它会在每个渲染周期创建，即每次都会重新安装组件。 render 道具不会这样做。有关详细信息，请参阅 render methods。

导航栏

修复 to 属性值以正确呈现 link，从路径中删除前导“/”并呈现直接 link.to 值。

改变

to={`/${props.link.to}`}

至

to={props.link.to}

演示