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

【问题标题】：How to get parent parameter in nested route?如何在嵌套路由中获取父参数？
【发布时间】：2018-02-19 05:03:47
【问题描述】：

对于一个 React 应用程序，我有以下嵌套路由/组件的基本结构：

/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 函数的 sn-ps）：

首页

<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>

用户布局

<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 参数，但这似乎是错误的。这是我唯一的选择吗？

【问题讨论】：

为什么不把它作为道具传下去呢？

标签： javascript reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

当然，在我发帖几分钟后，我就明白了。在我的顶级路由配置中，我将 /user/:id 设置为需要 exact 匹配。这意味着当我导航到 /user/:id/anything_else 时，react router 根本没有加载 UserLayout，因此没有机会测试我配置的其余路由。

所以我从我的家庭组件中改变了这个：

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

...到这个：

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

...现在一切都很好。

【讨论】：