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

【问题标题】：How to redirect after success from ajax call using React-router-component?如何使用 React-router-component 从 ajax 调用成功后重定向？
【发布时间】：2015-04-11 17:56:23
【问题描述】：

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

我已阅读有关 react 路由器组件的信息，并且我能够在客户端重定向，但在从 Store 中的 ajax 获取结果时无法重定向。请帮我。

【问题讨论】：

标签： reactjs reactjs-flux

【解决方案1】：

您需要使用Navigation mixin 中的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>;
  }
});

【讨论】：

我已经尝试过了，但现在它更改了 url 但不会显示该组件。
手动更改网址是否有效？可能您应该检查您的 Route 是否引用了正确的组件，而不是您要转换的登录表单。
我在顶部添加了一个链接，按照vimeo.com/channels/797633/page:5'第7课'进行路由，它工作正常。当我单击该链接时，它会重定向到该页面并显示结果，但不是在上述情况下？
我刚刚注意到您使用的是react-router-component 而不是react-router。我的错！我个人没有使用react-router-component，而是快速查看源代码，而不是Navigation mixin 和transitionTo 函数，您应该将NavigatableMixin 包含到您的然后使用navigate('my_url)` 进行重定向。

【解决方案2】：

这应该可以工作

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

【讨论】：

【解决方案3】：

当我向 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;

【讨论】：