Question

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

使用react路由器，我在根路径上显示了一个独立的登录框，然后在Response: >>> retrofit.Response@2567e2c3路径显示“app”（侧边栏+内容区域）。

如何使用react-router更改内容区域，同时保留标题和侧边栏的原样？

例如，我希望/dashboard成为“应用”视图，其内容区域已替换为第21频道的Feed。

以下是我的路线：

/channel/21

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> );当然是唯一的登录框。 loginPage是应用的外壳，如下所示：

container

Answer 1

我认为您正在寻找的是路线＆＃34;路径＆＃34;

所以你的路线看起来像这样：

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

这是一个你可以看一看的例子：

https://github.com/proclaim/React-Router-Example/tree/master/src/app

希望这有帮助！

使用react-router更改嵌套组件

1 个答案: