如何在嵌套路由中获取父参数

Question

i具有以下React App的嵌套路由/组件的基本结构：

• /users -> UsersList
• /users/:id -> UserLayout
  • /users/:id/ -> UserProfile
  • /users/:id/settings -> UserSettings
  • /users/:id/blah -> YetAnotherComponent

在React Router V4的上下文中，我要弄清楚的是如何访问UserSettings组件中的:id参数。我可以在UserLayout组件中访问它，但在下游没有其他地方。

我的主要路由器定义在于Home组件，但是所有特定用户的路由都包含相同的标头信息，因此我希望将所有特定于用户的路由嵌套。我当前的结构具有UserLayout组件中定义的这些嵌套路线。但是，无论我对布局组件的路由定义做什么，除了"索引"路由（UserProfile）以外，我都无法获得其他路由。尝试访问UserSettings或任何其他路线时，我的顶级404路线会被击中。

这是相关的JSX（实际组件的render函数的摘要）：

主页

<main>
     <Switch>
         <Route exact path="/login" component={Login} />
         <Route exact path="/users" component={UsersList} />
         <Route exact path="/users/:id" component={UserLayout} />
         <Route exact path="/" component={Home} />
         <Route component={NoMatch} />
     </Switch>
</main>

用户layout

<div>
     <Switch>
         <Route path={`${match.url}/settings`} component={UserSettings} />
         <Route path="/users/:id/blah" component={YetAnotherComponent} />
     </Switch>
     <Route path="/users/:id" component={UserProfile} />
</div>

在UserLayout组件中，我尝试了Switch中显示的两个路径格式，并尝试打开/关闭精确匹配。我唯一能想到的是使用Route组件的render参数传递ID参数，但这似乎是错误的。这是我唯一的选择吗？

Answer 1

当然，我发布后仅几分钟就知道了。在我的顶级路由配置中，我设置了/user/:id以需要 exker 匹配。这意味着，当我导航到/user/:id/anything_else时，React路由器根本没有加载UserLayout，因此没有机会测试我配置的剩余路线。

所以我从家庭组件中更改了此内容：

<Route exact path="/users/:id" component={UserLayout} />

...对此：

<Route path="/users/:id" component={UserLayout} />

...现在一切都很好。