如何在反应路由器中创建嵌套布局路由组件？

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是封装子容器和表象的成分在两个布局组件。 我需要能够渲染以及将道具传递给子元素，但我一直在收到错误。但是，请认为问题是由以下行分别嵌套在两个组件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扩展组件{ 渲染（）{ 回报（ //略去了 ） }}

和页面容器是平凡的表现组件。 如何在上面的示例中详细描述多个嵌套组件？ 谢谢

Answer 1

欢迎来到*！

在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/>元素！