当前设置

Question

我有一个React应用程序main.js调用app.js - 它充当父组件 - 如下所示：

React.render(<APP />, document.getElementById("main"));

现在我需要设置React Router，以便app.js能够处理应用内的路由。

当前设置

要设置我创建的routes.js路由，其中包含以下代码：

var Router = require('react-router');
var Route = Router.Route;

var routes = (
  <Route handler={App}>
    <Route path="/" handler={home}/>
  </Route>
);

module.exports = routes;

在app.js我导入路线并添加RouteHandler，如文档中所示：

var React = require('react');
var Router = require('../routes.js');
var RouteHandler = Router.RouteHandler;

var APP = React.createClass({
  render: function() {
    return (
      <RouteHandler/>
    );
  }
});

module.exports = APP;

我无法理解文档中的这段代码：

Router.run(routes, Router.HashLocation, (Root) => {
  React.render(<Root/>, document.body);
});

由于我已经在<app />组件中调用了main组件，因此我想处理app组件中的所有路由。我认为上面的代码正在转移handler={component_to_render}到Root。但是如何在app.js中配置我的代码以将路由转移到<RouteHandler/>？

我的整个设置可能有误，所以任何指导都将不胜感激。

Answer 1

由于Router必须知道要呈现的组件，因此它必须是根组件。所以不要写...

React.render(<APP />, document.getElementById("main"));

...只是写下：

Router.run(routes, Router.HashLocation, (Root) => {
  React.render(<Root/>, document.getElementById("main"));
});

当某些用户点击＆＃34; /＆＃34;在网址中，<Root/>节点将呈现您的APP处理程序，该处理程序将呈现您的HomeComponent。

在Flux应用程序中设置react-router

当前设置

1 个答案: