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

Question

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

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

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

如果我能看到模块在安装之前已经渲染了，那怎么可能呢？

Answer 1

这不是react-router特有的。在React Component生命周期中：

• 孩子们在父母面前。 componentWillMount以儿童为先。

• 父母在孩子面前卸下。 componentWillUnmount以父亲优先的方式运行。

以这种方式思考：如果你正在构建某些东西，首先要将较小的部分逐渐附加到较大的部分，直到你拥有完整的东西。如果您正在拆卸它，首先要移除较大的部件，然后拆卸每个部件，直到您回到部件上。

Answer 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将执行以下操作：

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