React Router 4：ルートコンポーネントをレイアウトコンポーネントに渡す

Question

ルートプロップをルートプロップで初期APIリクエストを実行するレイアウトコンポーネントに渡そうとしていますが、これらのルートプロップは子プロセスにのみ渡されるという問題がありますルート。明らかに

<BrowserRouter> 
    <Switch> 
     <AppLayout> // This AppLayout performs API requests 
        // with the :route param in the child routes. 
      <Route path="/some/:route" component={SomeComponent} /> 
      <Route path="/some/other/:route" component={OtherComponent} /> 
     </AppLayout> 
    </Switch> 
</BrowserRouter> 

、ユーザーが/some/:routeルートに当たると、レイアウトが既にレンダリングされていたであろう。

<BrowserRouter> 
    <Route path="/some/:route" render={(props) => 
     (<AppLayout {...props}><SomeComponent /></AppLayout>)} /> 
</BrowserRouter> 

これは動作しますが、AppLayoutをアンマウントすると私は同じレイアウトを使用して別のルートに行くたびに再マウントします：私はこのような何かをやってみました。反応-ルータ3で

は、私はこのような何かができる：

<Router history={browserHistory}> 
    <Route path="/" component={AppLayout}> 
     <Route path="/some/:route" component={SomeComponent} /> 
     <Route path="/some/other/:route" component={OtherComponent} /> 
    </Route> 
</Router> 

とルートの小道具はAppLayoutコンポーネント上で利用できるようになります。

実際に反応ルータ4でこれを達成する方法はありますか？私はAppLayoutにルータの小道具を渡すと、両方のルートのハンドラとしてAppLayoutコンポーネントを使用していますか

<BrowserRouter> 
    <Switch> 
     <Route exact path="/" render={props => <AppLayout {...this.props} />} /> 
     <Route exact path="/some/:route" component={AppLayout} /> 
     <Route exact path="/some/other/:route" component={AppLayout}/> 
    </Switch> 
</BrowserRouter> 

注意：あなたが巣のルートにしたいので

Answer 1

あなたはこのような何かを行う必要があります。今、あなたは、それぞれのコンポーネントに再びこれらのルートを言及する必要がありますAppLayoutコンポーネント内に、次のように：

<Switch> 
    <Route exact path="/some/:route" render={props => <SomeComponent {...this.props} />} /> 
    <Route exact path="/some/other/:route" render={props => <OtherComponent {...this.props} />} /> 
</Switch>