Reactjs 使用react路由器更改嵌套组件

我正在使用react构建一个带有静态侧边栏和动态主内容区域的单页应用程序

使用react router，我在根路径上显示了一个独立的登录框，然后在/dashboard路径上显示应用程序侧栏+内容区域

如何使用react router更改内容区域，同时保持标题和侧栏不变

例如，我希望/channel/21成为应用程序视图，内容区域替换为channel21的提要

以下是我目前的路线：

var routes = (
    <Route name="app" path="/" handler={require('./components/app')}>
        <DefaultRoute handler={require('./components/loginPage')} />
        <Route name="dashboard" handler={require('./components/container')} />
        <NotFoundRoute handler={require('./components/notFoundPage')} />
    </Route>
);

---

我想你要找的是路线

因此，您的路线将如下所示：

var Container = React.createClass({
render: function() {
    return (
        <div className="col-sm-12 main-container">
            <div className="row headerBar">
                <div className="col-sm-12">
                    <div>Header area</div>
                </div>
            </div>
            <div className="row contentArea">
                <div className="col-sm-3">
                    <div>Left nav area</div>
                </div>
                <div className="col-sm-9">
                    <div>content Area</div>
                </div>
            </div>
            <div className="row footerArea">
                <div className="col-sm-12">
                    <div>Footer area</div>
                </div>
            </div>
        </div>
    );
}
});

<Route name=”Dashboard” handler={Container}>
   <Route path=”:id” handler={Channel}/>
</Route>

在你的频道里，这是它的样子

‘use strict’;
var React = require(‘react’),
    Router = require(‘react-router’);
var Channel = React.createClass({
    //mixins: [Router.State],
    render: function() {
    return (
       <div>this is channel with ID:
          {this.props.params.id} //get id using this
       </div>
       );
    }
});
module.exports = Channel;

这是您注册路由器的方式

Router.run(Routes, function(Handler, state) {
    React.render(<Handler params={state.params}/>, document.body);
});

下面是一个您可以查看的示例：

---

希望这有帮助

非常感谢，我会检查一下，看看是否可以根据我的特定用例调整它。