Реактивный маршрутизатор: монтируется в компонент вложенного маршрута перед компонентом родительского маршрута?

Question

У меня есть вложенная маршрут, как это:

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

Я заметил, что модуль нарастает до того модулей крепежных элементов. Является ли это предполагаемой функциональностью вложенных маршрутов? Я спрашиваю, потому что у меня есть сбор данных в Модули, которые необходимо решить для Модуль для визуализации, как предполагалось.

Как это возможно, если я могу видеть, что Модули визуализировали перед тем, как он еще установил?

Answer 1

Это не относится к react-router. В React Component жизненного цикла:

• Дети установлены перед их родителями. componentWillMount бежит ребенок-первый.

• Родители размонтированы перед своими детьми. componentWillUnmount запускает parent-first.

Подумайте об этом таким образом: если вы что-то строить, сначала прикрепить мелкие части на более крупные части, постепенно, до тех пор, пока у вас есть полная вещь. Если вы разбираете его, сначала вы удаляете большие куски, а затем разбираете каждую из этих частей, пока не вернетесь к компонентам.

Answer 2

Что вы видите, потому что react-router не действительно использовать жизненный цикл React для рендеринга своих детей.

Вместо этого react-router индивидуально отображает каждый компонент <Route>, а затем объединяет их. Вот почему вы должны включить this.props.children в маршрут компонента, который имеет дочерние маршруты. Вы можете увидеть код, ответственный за это, в функции рендеринга <RouterContext>.

По существу, он делает то, что он берет самый вложенный компонент маршрута и отображает его. Затем он берет следующий наиболее вложенный компонент и отображает это с ранее обработанным компонентом как его children prop. Это продолжается по линии до тех пор, пока вы не достигнете компонента корневого маршрута.

Учитывая маршруты:

<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. Render <Inbox children={element} /> и результат магазина как element.
3. Render <App children={element} /> и результат возврата.