Javascript 反应路由器：嵌套路由组件在父路由组件之前装载？

我有一个嵌套路由，如下所示：

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

我注意到模块在安装之前已经安装好了。这是嵌套路由的预期功能吗？我之所以这样问，是因为我在模块中收集了一些数据，需要解决这些数据，以便模块按预期呈现

---

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

这并不是特定于

react router

。在React

组件的生命周期中：


孩子们坐在父母前面<代码>组件将首先装载子组件

父母在孩子面前被卸下<代码>组件将卸载

首先运行父级

---

这样想：如果你在构建一个东西，首先你要将较小的部分逐渐地连接到较大的部分，直到你拥有完整的东西。如果要拆下它，首先要拆下较大的部分，然后拆下每个部分，直到回到组件。

您看到的是因为

react router

并没有真正使用react生命周期过程来渲染其子级

相反，

react路由器

单独呈现每个

的组件，然后将它们合并在一起。这就是为什么必须在具有子路由的组件路由中包含

This.props.children

。您可以在的render函数中看到负责此操作的代码

本质上，它所做的是获取嵌套最多的路由组件并对其进行渲染。然后，它将取下一个嵌套最多的组件，并将其与先前渲染的组件一起渲染，作为其

子组件

道具。这将沿直线继续，直到到达根管线组件

鉴于路线：

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

当您访问

/inbox/messages/12

时，

react router

将执行以下操作：

渲染

并将结果存储为

元素

渲染

并将结果存储为

元素

渲染

并返回结果

---

是的，应该是这样的。在子

组件将挂载

之前调用父

组件将挂载

。子对象的

componentDidMount

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