如何通过 React-Router-Dom 省略父路径来定义子路径？

Question

所以，假设我有个人资料页面，它根据路径呈现不同的组件。 例如：

/profile/posts 在 Profile 中渲染 Posts 组件。

/profile/comments 在 Profile 中呈现 Comments 组件。

我通常先渲染"/profile"路径的Profile页面，然后在里面，根据上面提到的Routes渲染相关的组件。我想做的是，省略 Profile 内 Route 组件中定义的路径的 "/profile" 部分，只保留剩余部分。在不破坏路由的情况下如何做到这一点？

见下面代码中的cmets：

// App.js

// ...

<Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route path="/profile">  // Profile page is rendered here
      <Profile />
    </Route>
</Switch>

// ...

// Profile.js

// ...

<Switch>
    <Route exact path="/profile/posts">  // I want to omit "/profile" part of the path.
      <Posts />
    </Route>
    <Route path="/profile/comments">  // I want to omit "/profile" part of the path.
      <Comments />
    </Route>
</Switch>
// ...

Answer 1

在嵌套路由时，如果您不想“复制”路径详细信息，则可以从 match 对象中获取它们，特别是用于构建嵌套路由的 path 值。

假设Profile是一个函数组件，使用useRouteMatch钩子访问当前匹配路由的path值。如果它是一个类组件，那么它必须访问路由道具才能获得this.props.match。

// Profile.js

const { path } = useRouteMatch();

// ...

<Switch>
  <Route path={`${path}/posts`}> 
    <Posts />
  </Route>
  <Route path={`${path}/comments`}>
    <Comments />
  </Route>
</Switch>

// ...

这是来自 `react-router-dom 的更深入的 nested routing demo。