反応ルータでネストされたレイアウトルーティングコンポーネントを作成する方法は？

Question

指定ルートのすべての子ルートのレイアウトをあらかじめ設定する方法でルートをネストしようとしています。例えば

：この場合

<Provider store={store}> 
    <Router history={history}> 
     <Router path="/" component={Init}> 
      <Router component={LayoutThreeCol}> 
       <IndexRoute component={PageContainer}/> 
      </Router> 
      <Router component={LayoutTwoCol}> 
       <Route path="/example" component={Example}/> 
       <Route path="/another" component={Another}/> 
      </Router> 
     </Router> 
    </Router> 
</Provider> 

、LayoutThreeColとListTwoCol子コンテナとプレゼンテーションコンポーネントをカプセル化する2つのレイアウト・コンポーネントです。 私は子要素に小道具を渡すだけでなくレンダリングもできる必要がありますが、私はエラーが発生しています。しかし、問題は、次の行をそれぞれ2つのコンポーネントの子と親にネストすることによって発生すると考えられます。ここ

`{React.cloneElement({...this.props}.children, {...this.props})}` 

So here is the code I am using an init file to instantiate the `mapStateToProps` 

import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux'; 
import * as actionCreators from './ActionCreators' 
import App from './App'; 

function mapStateToProps(state, ownProps){ 
    return{ 
     Items: state.feedItems, 
     universalNav: state.universalNav, 
     height: state.height, 
     width: state.width, 
     isMobile: state.isMobile, 
     isTablet: state.isTablet 
    }; 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators(actionCreators, dispatch); 
} 


const Init = connect(mapStateToProps, mapDispatchToProps)(App); 

export default Init; 

私はここラッパーとして

export default class App extends Component { 

render(){ 
      return(
       <div> 
        <NavContainer /> 
        {React.cloneElement({...this.props}.children, {...this.props})} 
       </div> 
      ); 
    } 
} 

を使用するアプリケーション・ファイルであるレイアウトファイルの一例です。

export default class LayoutThreeCol extends Component{ 
    render(){ 
     return(
      <div className="layout-3-col"> 
       <div className="layout-3-col-left"> 
        //stuff goes here 
       </div> 
       <div className="layout-3-col-center"> 
        {React.cloneElement({...this.props}.children, {...this.props})} 
       </div> 
       <div className="layout-3-col-right"> 
        //stuff goes here 
       </div> 
      </div> 
     ) 
    } 
} 

レイアウト2 COL エクスポートデフォルトクラスLayoutTwoColは、コンポーネント延び{ は（レンダリング）{ リターン（簡潔 ために省略 //） } }

、ページコンテナはAであります些細なプレゼンテーションコンポーネント。 上記の例のように、複数のネストされたコンポーネントをレンダリングするにはどうすればよいですか？ ありがとう

Answer 1

ようこそStackoverflow！

documentationには、1つのルート<Router>コンポーネントが表示されます。また、ルータにLayoutTwoおよびLayoutThreeColコンポーネントのパスがありません。

複数のネストされたコンポーネントをレンダリングするには、ネストされた<Route>コンポーネントが必要です。このように、this.props.childrenは親コンポーネントのrenderメソッドの子コンポーネントになります。

あなただけのルートにパラメータを追加し、子ルートに小道具を渡したい場合は、次の<Message>要素で

<Route path="messages/:id" component={Message} /> 、あなたが持っているでしょう：{} this.props.params.id

を

私はあなたのルータがこのようになるはずだと思う：

<Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={Init}> 
      <Route path="layoutThree" component={LayoutThreeCol}> 
       <IndexRoute component={PageContainer}/> 
      </Route> 
      <Route path="layoutTwo" component={LayoutTwoCol}> 
       <Route path="example" component={Example}/> 
       <Route path="another" component={Another}/> 
      </Route> 
     </Route> 
    </Router> 
</Provider> 

/layoutThree：LayoutThreeMethodで 方法をレンダリング、this.props.childrenはデフォルトで<PageContainer>要素になります！

/layoutTwo/exemple：layoutTwoColでは、this.props.childrenは<Exemple/>要素になります！