react-router：ネストされたルートコンポーネントは、親ルートコンポーネントの前にマウントされますか？

Question

私はこのようなネストされたルートを持っている：

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

を私はモジュールがモジュールマウントする前にマウントされていることに気づきました。これはネストされたルートの意図された機能ですか？モジュールで何らかのデータ収集が行われているので、モジュールを意図してレンダリングする必要があるため、私は尋ねます。

モジュールがマウントされる前にレンダリングされていることがわかったら、どうすれば可能ですか？

Answer 1

react-routerに特定されていません。反応の中でComponentライフサイクル：

• 子供は両親の前にマウントされています。 componentWillMountが子ども優先です。

• 親は子供の前にアンマウントされています。 componentWillUnmountがparent-firstを実行します。

あなたが何かを構築している場合は、最初に完全なものを得るまで、小さな部品を大きな部品に取り付けます。あなたが解体している場合は、最初に大きい方の部分を取り除いてから、その部分に戻ってくるまでそれぞれの部分を解体してください。

Answer 2

react-routerは表示されません実際にはは子供をレンダリングするためにライフサイクルプロセスを使用しています。

代わりに、react-routerは、個々に各コンポーネントを個別にレンダリングし、それらを一緒にマージします。このため、子ルートを持つコンポーネントルートに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. はelementとして<Message routeParams={{ id: 12 }} />や店舗、結果をレンダリングします。
2. レンダリング<Inbox children={element} />と結果をelementとして保存します。
3. レンダリング<App children={element} />と返品結果。