【问题标题】：Setting up react-router in a Flux application在 Flux 应用程序中设置 react-router
【发布时间】：2015-11-22 17:52:35
【问题描述】：

我有一个 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);
});

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

我的整个设置可能有误，因此我们将不胜感激。

【问题讨论】：

应该可以，有什么问题？你不明白的语法是一个叫做ArrowFunction的ES6语法，它是写function(Root){ return React.render(<Root/>, document.body) })的快捷方式
我正在从“主组件”渲染“应用”组件，我打算在“主”组件中使用路由，但不在“应用”组件中使用。为了进一步解释，我打算让所有路由影响“主”组件并根据传递的路由呈现新组件。例如，如果触发此路由，我想在“main.js”中加载“home”组件。现在我不确定Router.run ....代码运行，我不打算在 Router.run 函数中使用 React.render(, document.body)，我只需要从 routes.js 中触发的任何路由影响 app.js
这不是一个完整的答案，但我注意到一个问题：您将 routes.js 作为 React Router 导入，而不是在 app.js 中导入实际的 React Router。您需要 require React Router 和独立的路由：var Router = require('react-router') 和 var routes = require('../routes.js');。

标签： reactjs reactjs-flux flux react-router react-jsx

【解决方案1】：

因为Router 必须知道要渲染哪个组件，所以它必须是根组件。所以与其写...

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

...就这么写吧：

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

当某些用户点击“/”网址时，<Root/> 节点将呈现您的 APP 处理程序，该处理程序将依次呈现您的 HomeComponent。

【讨论】：

如果我使用'React.render(, document.getElementById("main"));'在 main.js 中渲染 app.js 中的应用程序组件，现在我想渲染 /(root) 或 app.js 内的任何路由，但不是 main.js。我在 app.js 中有但现在我如何在 app.js 中监听 URL 和渲染组件。而且我不能使用这段代码来收听 url，因为这段代码有 [ document.getElementById("main")); ] 代码：Router.run(routes, Router.HashLocation, (Root) => { React.render(, document.getElementById("main")); });
例如，假设您有一个“公共”应用程序和一个“管理员”应用程序，因此您希望两者使用不同的路线，这就是您要寻找的想法？