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

Question

I have a nested route like this:

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

I noticed that Module is mounting before Modules mounts. Is this the intended functionality of nested routes? I ask because I have some data gathering happening in Modules that needs to be resolved in order for Module to render as intended.

How is this possible if I can see that Modules has rendered before it even mounts?

Answer 1

This is not specific to react-router . In the React Component life-cycle:

• Children are mounted before their parents. componentWillMount runs child-first.

• Parents are unmounted before their children. componentWillUnmount runs parent-first.

Think about it this way: if you're constructing something, first you attach the smaller parts to the larger parts, progressively, until you have the complete thing. If you're dismantling it, first you remove the larger pieces, and then disassemble each of those pieces, until you're back to the components.

Answer 2

What you are seeing is because react-router doesn't really use the React lifecycle process to render its children.

Instead, react-router individually renders each <Route> 's component and then merges them together. This is why you have to include this.props.children in a component route that has child routes. You can see the code responsible for this in the <RouterContext> 's render function.

Essentially what it does is that it takes the most nested route component and renders it. Then, it takes the next most nested component and renders that with the previously rendered component as its children prop. This continues down the line until you reach the root route component.

Given the routes:

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

When you visit /inbox/messages/12 , react-router will do the following:

1. Render <Message routeParams={{ id: 12 }} /> and store result as element .
2. Render <Inbox children={element} /> and store result as element .
3. Render <App children={element} /> and return result.