访问父组件中的 URL 参数答案

【问题标题】：Accessing URL params in parent components访问父组件中的 URL 参数
【发布时间】：2016-07-10 22:37:11
【问题描述】：

我有一个有趣的难题，我想了解一下。我的路由设置如下：

<Router history={hashHistory}>
  <Route path='/' component={Main}>
    <IndexRoute component={Home} />
    <Route path='foo' component={FooContainer}>
      <Route path='bars/:barId' component={BarDetailsContainer} />
      <Route path='baz/:bazId' component={BazDetailsContainer} />
    </Route>
    <Route path='things' component={ThingListContainer}>
      <Route path='thing/:thingId' component={ThingDetailsContainer} />
    </Route>
  </Route>
</Router>

而且它基本上是有效的。 FooContainer 有自己的孩子（不是通过this.props.children），当这些组件通过各自的路由加载时，它想知道:barId 是什么（和:bazId）。有没有办法从“父”组件FooContainer 访问当前参数的所有——包括其子路由的 URL 参数？

注意：也有可能我这样做完全错误，在这种情况下，我希望得到一些建议，以更好地实现我的目标。

【问题讨论】：

标签： react-router

【解决方案1】：

相关人士的回答：

原来我在Main 的一个子中寻找this.props.params，它不受任何Route 管理，因此，我需要明确 /em> 将 params 属性（或任何重要的参数）从 Main 传递给它。

我的Main 的实现，作为一个粗略的 JSX 草图，看起来像：

<div>
    <SomeOtherComponentThatWantsParams />
    {this.props.children}
</div>

【讨论】：