複数のレイアウトが反応ルータ4とreduxの下で動作しません

Question

私は異なるルートで2つのレイアウトを適用しようとしています。 ただし、this.props.childrenは、コンテナを期待どおりに表示しません。つまり、this.props.childrenはレイアウトではnullです。

複数のレイアウトを作成するにはどうすればよいですか？

NPMバージョン

├─┬ @types/react-router@4.0.15 
│ ├── @types/history@4.6.0 
│ └── @types/react@15.6.4 deduped 
├─┬ @types/react-router-redux@5.0.8 
│ ├── @types/history@4.6.0 deduped 
│ ├── @types/react@15.6.4 deduped 
│ └── redux@3.7.2 deduped 

ルータ

ReactDOM.render(
    <Provider store={store}> 
     <ConnectedRouter history={history}> 
      <div> 
       <Router> 
        <Switch> 
         <MainLayout exact path="/" component={IndexContainer as any}/> 
         <MainLayout path="/index.html" component={IndexContainer as any}/> 
         <CheckoutLayout path="/checkout/:slotDetailId" component={CheckoutContainer as any}/> 
         <Route component={NotFound}/> 
        </Switch> 
       </Router> 
      </div> 
     </ConnectedRouter> 
    </Provider> 
    , 
    document.getElementById('quickpass') 
) 

export default class MainLayout extends React.Component<any, {}> { 
    render() { 
     return (
      <div> 
       <Header /> 
       <Banner /> 
        {this.props.children} 
       <Footer /> 
      </div> 
     ) 
    } 
} 

export class CheckoutLayout extends React.Component<any, {}> { 
    render() { 
     return (
      <div> 
       <Header /> 
       <Banner /> 
       {this.props.children} 
      </div> 
     ) 
    } 
}  

更新

要求http://quickpass.com/checkout/762常にMainLayout 任意のアイデアが一致？

 <Provider store={store}> 
      <ConnectedRouter history={history}> 
       <Router> 
        <Switch> 
         <Route path="/" component={MainLayout} /> 
         <Route path="/checkout" component={CheckoutLayout} /> 
         <Route component={NotFound}/> 
        </Switch> 
       </Router> 
      </ConnectedRouter> 
     </Provider> 



     export default class MainLayout extends React.Component<any, {}> { 
      render() { 
       return (
        <div> 
         <Header /> 
         <Banner /> 
         <Switch> 
          <Route exact path='/' component={IndexContainer}/> 
          <Route exact path='/index.html' component={IndexContainer}/> 
         </Switch> 
         <Footer /> 
        </div> 
       ) 
      } 
     } 

     export class CheckoutLayout extends React.Component<any, {}> { 
      render() { 
       return (
        <div> 
         <Header /> 
         <Banner /> 
         <Switch> 
          <Route exact path='/checkout/:slotDetailId' component={CheckoutContainer}/> 
         </Switch> 
        </div> 
       ) 
      } 
     }    

Answer 1

あなたSwitchは、必要に応じて、あなたのレイアウトや子供にrender方法からpropsを渡すことができます

<Switch> 
    <Route exact path="/" render={(props)=><MainLayout><IndexContainer/> <MainLayout/>}/> 
    <Route exact path="/index.html" render={(props)=><MainLayout><IndexContainer/> <MainLayout/>}/> 
    <Route path="/checkout/:slotDetailId" render={(props)=><CheckoutLayout><CheckoutContainer/> <CheckoutLayout/>}/> 
    <Route component={NotFound}/> 
</Switch> 

でなければなりません。

編集：他の方法 :)

あなたは、コンポーネント間のあなたのRoutesを分割することができます。あなたのルートコンポーネントは、あなたのレイアウトコンポーネントのためにをレンダリングします。レイアウトコンポーネントは、レイアウトを表示する子コンポーネントのためにRoutesをレンダリングします。

ReactDOM.render(
    <Provider store={store}> 
     <ConnectedRouter history={history}> 
        <Switch> 
         <Route exact path="/" component={MainLayout}/> 
         <Route path="/checkout" component={CheckoutLayout}/> 
         <Route component={NotFound}/> 
        </Switch> 
      </ConnectedRouter> 
    </Provider> 
    , 
    document.getElementById('quickpass') 
) 

export default class MainLayout extends React.Component<any, {}> { 
    render() { 
     return (
      <div> 
       <Header /> 
       <Banner /> 
        <Switch> 
         <Route exact path='/' component={IndexContainer}/> 
         <Route exact path='/index.html' component={IndexContainer}/> 
         //Any other routes that need to load this layout go after this 
        </Switch> 
       <Footer /> 
      </div> 
     ) 
    } 
} 

export class CheckoutLayout extends React.Component<any, {}> { 
    render() { 
     return (
      <div> 
       <Header /> 
       <Banner /> 
       <Switch> 
         <Route exact path='/checkout/:slotDetailId' component={CheckoutContainer}/> 
         //Any other routes that need to load this layout go after this 
        </Switch> 
      </div> 
     ) 
    } 
}