Question

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

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

我想在反应路由器v4的上下文中弄清楚如何访问:id组件中的UserSettings参数。我可以在UserLayout组件中正常访问它，但在其他地方还没有其他地方。

我的主路由器定义位于Home组件中，但所有特定于用户的路由都包含相同的标头信息，因此我希望嵌套所有特定于用户的路由。我当前的结构在UserLayout组件中定义了这些嵌套路由。但是，无论我对布局组件的路由定义做什么，我都无法获得除“index”路由（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>

UserLayout

<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设置为需要完全匹配。这意味着当我导航到/user/:id/anything_else时，路由器根本没有加载UserLayout，因此没有机会测试我配置的其余路由。

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

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

......对此：

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

......现在一切都与世隔绝。

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

主页

UserLayout

1 个答案: