我可以在 Flux 中使用动作来控制路线，如何？答案

【问题标题】：can i use action in Flux to control routes, HOW?我可以在 Flux 中使用动作来控制路线，如何？
【发布时间】：2015-05-06 16:39:05
【问题描述】：

我正在 Flux 中编写一个身份验证模块，操作：auth,auth_success,auth_error。我在想当动作 auth_error 发生时，路由器将转到“/登录”。当 action, action, auth_success 发生时，路由器将转到'/dashboard'。但这似乎是错误的，因为动作只交给调度员。我不知道如何路由回调。也许检查商店价值？

【问题讨论】：

Flux 或 React 中没有路由包。这意味着您很可能正在使用其他东西处理路由。解决问题的最简单方法是在身份验证发生后路由用户。这可以通过 JS 轻松完成。只需更改窗口位置以满足您的需要。然后让路由器定义要渲染的组件。

标签： reactjs reactjs-flux react-router

【解决方案1】：

你必须 mixin 你的 React 类和 Route.Navigation 对象，例如

/** @jsx React.DOM */

var React = require('react');

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

var UserStore = require('user-store');

var YourClass = module.exports = React.createClass({
  mixins:[Navigation], //This is very important

  getInitialState: function() {
    return {};
  },

  componentWillMount: function(){
    UserStore.addChangeListener(this._method);
  },
  componentWillUnmount: function(){
    UserStore.removeChangeListener(this._method);
  },

  render: function() {
    return (
      <div>
      </div>
    );
  },

  _method: function() {
    // From here you can call methods of Navigator Object
    this.transitionTo('SomeRouteName'); //This method will render the specified <Route>
  } 
});

有关更多信息，您可以查看 https://github.com/rackt/react-router/blob/master/docs/api/mixins/Navigation.md

为了改变路由并根据通量架构，你应该从你应该拥有的一些用户存储的回调中调用transitionTo。

我在代码中添加了一个示例，您可以根据您的具体情况对其进行自定义。

编码愉快！

【讨论】：

我知道如何使用react-router，我不知道如何在Flux中使用它作为动作回调，如果它不受react组件控制。