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>
        )
    }
}

布局两个col export default class LayoutTwoCol extends Component { 渲染（）{ 返回（ //为简洁而省略） } }

页面容器是一个简单的表示组件。如何在上面的示例中详细说明如何渲染多个嵌套组件？感谢

Answer 1

欢迎使用Stackoverflow！

在documentation中，我只看到一个根<Router>组件。此外，路由器中没有LayoutTwo和LayoutThreeCol组件的任何路径。

要呈现多个嵌套组件，您需要具有嵌套的<Route>组件。这样，this.props.children将成为父组件的render方法中的子组件。

如果您想将道具传递给子路线，只需在路线中添加一个参数：

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

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

1 个答案: