React Router-在嵌套组件中安装组件

React Router - Mounting component inside a nested component

本文关键字：组件 安装 嵌套 Router- React      更新时间：2023-09-26

我很难弄清楚如何使用react router v1.0在嵌套组件中安装组件。我有一个加载布局组件的应用程序组件。布局组件然后加载两个组件，菜单和内容。我想根据路线在内容组件中加载不同的组件。

下面是我的示例代码。

var App = React.createClass({
    render : function(){
         return <div><Layout/></div>
     }
});
var Layout = React.createClass({
    render : function(){
        return(
            <div>
                <Menu/>
                <Content/>
            </div>
        )
    }
});
var Content = React.createClass({
    render : function(){
        return <div>This is where i want to mount my components</div>
    }
});
var List = React.createClass({
    render : function(){
        return <div>some list goes here</div>
    }
});
var Graph = React.createClass({
    render : function(){
        return <div>some graph goes here</div>
    }
});
<Router>
    <Route path='/' component={App}>
        <Route path='/list' component={List}/>
        <Route path='/graph' component={Graph}/>
    </Route>
</Router>

如有任何帮助/建议，我们将不胜感激。

感谢

它与基本的React组件完全相同。当您嵌套它们时，它们在this.props.children上可用。所以你最终会得到这样的东西：

var App = React.createClass({
    render : function(){
         return <div><Layout>{this.props.children}</Layout></div>
     }
});
var Layout = React.createClass({
    render : function(){
        return(
            <div>
                <Menu/>
                <Content>{this.props.children}</Content>
            </div>
        )
    }
});
var Content = React.createClass({
    render : function(){
        return <div>{this.props.children}</div>
    }
});
相关文章：