如何使用React-router-component从ajax调用成功后重定向？

Question

我正在使用React JS的Facebook flux架构构建一个应用程序。我已经建立了应用程序的基本部分，我有一个登录表单。我正在从节点服务器获取结果来验证商店的用户，我正在从服务器获取结果，现在我卡住了，成功后如何将用户重定向到主页。

我读过关于react路由器组件的文章，我可以在客户端重定向，但不能在从Store中的ajax获取结果时重定向。请帮帮我。

Answer 1

您需要使用Navigation中的transitionTo函数：http://git.io/NmYH。它应该是这样的：

// I don't know implementation details of the store,
// but let's assume it has `login` function that fetches
// user id from backend and then calls a callback with 
// this received id
var Store = require('my_store');
var Router = require('react-router');

var MyComponent = React.createClass({
  mixins: [Router.Navigation],

  onClick: function() {
    var self = this;
    Store.login(function(userId){
      self.transitionTo('dashboard', {id: userId});
    });
  },

  render: function() {
    return: <button onClick={this.onClick}>Get user id</button>;
  }
});

Answer 2

当我向react元素属性添加对路由器的要求，并像这样使用路由器时，它对我起作用了：

// this is the redirect
    this.context.router.push('/search');

// this should appear outside the element
    LoginPage.contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    module.exports = LoginPage;

Answer 3

这应该是可行的

var Store = require('Store');
var Navigatable = require('react-router-component').NavigatableMixin

var LoginComponent = React.createClass({
    mixins: [ Navigatable ],

    onClick: function() {
        Store.login(function(userId){
            this.navigate('/user/' + userId)
        }.bind(this));
    },

    render: function() {
        return <button onClick={this.onClick}>Login</button>;
    }
});