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

Question

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

• /users-

在react router v4的上下文中，我试图弄清楚的是如何访问用户设置组件中的：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>

<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组件中，我尝试了开关中显示的两种路径格式，并尝试了打开/关闭精确匹配。我唯一能想到的就是使用Route组件的render参数来传递id参数，但这似乎是错误的。这是我唯一的选择吗？




Answer 1

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

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

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

……为此：

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

... 现在世界一切都好了。