react-router：嵌套路由组件在父路由组件之前安装？答案

【问题标题】：react-router: Nested route component mounts before parent route component?react-router：嵌套路由组件在父路由组件之前安装？
【发布时间】：2017-04-24 00:36:33
【问题描述】：

我有一个这样的嵌套路由：

<Route path="modules" component={Modules}>
  <Route path=":moduleId" component={Module}/>
</Route>

我注意到 Module 是在 Modules 安装之前安装的。这是嵌套路由的预期功能吗？我问是因为我在 Modules 中发生了一些数据收集，需要解决这些数据以便 Module 呈现为有意的。

如果我可以看到 Modules 在它安装之前已经渲染，这怎么可能？

【问题讨论】：

是的，应该是这样的。

标签： javascript reactjs react-router nested-routes

【解决方案1】：

这并非特定于 react-router。在 React Component 生命周期中：

孩子先于父母上马。 componentWillMount 以孩子为先。
父母在他们的孩子之前被卸载。 componentWillUnmount 运行父母优先。

这样想：如果您正在构建某些东西，首先将较小的部分连接到较大的部分，逐步进行，直到您拥有完整的东西。如果您要拆解它，请先拆下较大的部分，然后再拆开这些部分，直到回到组件上。

【讨论】：

父 comonentWillMount 在子 componentWillMount 之前被调用。子级的 componentDidMount 方法在其父级之前调用。
父组件WillMount 在其子组件WillMount 之前被调用这一事实使得在父组件中进行一些数据获取（获取子数据）非常诱人。所以我希望你能明白为什么这一切让我感到困惑。基本上在这个嵌套路由之前，我的组件的所有数据都在父 Module 组件中获取，然后传递给子 Module。但是，因为我想实现可共享的 URL，我现在需要这些子组件由 routeParam 驱动，因此我遇到了这个难题。

【解决方案2】：

您所看到的是因为react-router 并没有真正使用 React 生命周期过程来呈现其子级。

相反，react-router 单独渲染每个<Route> 的组件，然后将它们合并在一起。这就是为什么必须在具有子路由的组件路由中包含 this.props.children 的原因。您可以在<RouterContext> 的渲染函数中看到负责此操作的代码。

本质上它所做的就是获取嵌套最多的路由组件并渲染它。然后，它获取下一个最嵌套的组件，并将之前渲染的组件作为其children 属性进行渲染。这会一直持续下去，直到您到达根路由组件。

给定路线：

<Route path="/" component={App}>
  <Route path="inbox" component={Inbox}>
    <Route path="messages/:id" component={Message} />
  </Route>
</Route>

当您访问/inbox/messages/12 时，react-router 将执行以下操作：

渲染<Message routeParams={{ id: 12 }} />并将结果存储为element。
渲染<Inbox children={element} />并将结果存储为element。
渲染<App children={element} />并返回结果。

【讨论】：