我如何从 React 子路由导航回父路由

Question

在我的应用程序中，我有一个博客模块。当路由匹配 '/blog' 时，博客根组件根据以下内容呈现：

<Route path="/blog" component={BlogRoot} />

在此组件中有一个子路由器：

<BrowserRouter>
  <Switch>
    <Route path={`${match.path}/:slug`} component={BlogPost} />
    <Route path={match.path} exact component={BlogListing} />
  </Switch>
</BrowserRouter>

我无法从博客Post 组件（与 ${match.path}/:slug 匹配）导航回列表（与 path={match.path} exact 匹配的列表）。在 Blog Post 路由上，使用 Link to="/blog" 不会呈现 Blog Listing 组件（它保留在当前 BlogPost 上）。

我做错了什么？

提前致谢。

Answer 1

之所以停留在同一个组件，是因为找不到下一条路线。为此，您需要先定义动态路由 (/:slug)，然后再使用您的组件路由。

我如何从 React 子路由导航回父路由

How do I navigate from a React Child route back to a parent

reactjs

react-router

react-router-v4

react-router-dom