如何在反應路由器中創建嵌套佈局路由組件？

我試圖以預先設置指定路由的所有子路由的佈局來嵌套路由。如何在反應路由器中創建嵌套佈局路由組件？

例如：

<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是封裝子容器和表象的成分在兩個佈局組件。我需要能夠渲染以及將道具傳遞給子元素，但我一直在收到錯誤。但是，請認爲問題是由以下行分別嵌套在兩個組件child和parent中引起的。

`{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個山坳出口默認類LayoutTwoCol擴展組件{ 渲染（）{ 回報（ //略去了） }}

和頁面容器是平凡的表現組件。如何在上面的示例中詳細描述多個嵌套組件？謝謝

來源

2017-01-22 Shannen Smith

你的路由器配置很混亂，因爲你只有一個路徑'「/」'。你期望什麼觸發在這些嵌套路由器中加載更多的組件。你也只需要一個包裝'路由器'子組件應該'路線' – azium

我回答了你的問題？如果是這樣，你能接受我的答案嗎？如果不是，你能告訴我它有什麼問題嗎？ – AlexB

歡迎來到Stackoverflow！

在documentation中，我只看到一個根<Router>組件。另外，路由器中的LayoutTwo和LayoutThreeCol組件沒有任何路徑。

要呈現多個嵌套組件，您需要嵌套<Route>組件。這樣，this.props.children將成爲父組件的渲染方法中的一個子組件。

如果你想道具傳遞給孩子的路線，只是在路由添加一個參數：

<Route path="messages/:id" component={Message} /> 在<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/>元素！

來源

2017-01-22 19:22:11 AlexB

this.props.children結束爲空？ –

哪裏？你有什麼代碼？ – AlexB

@ShannenSmith我做了一個mistack path =「/ example」應該是path =「exemple」和path =「/ another」應該是path =「another」（參見編輯） – AlexB

如何在反應路由器中創建嵌套佈局路由組件？

回答

相關問題