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

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

我已阅读有关反应路由器组件，我可以在客户端重定向，但无法在Store中从ajax获取结果时重定向。请帮帮我。

来源

2015-02-11 Toretto

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

来源

2015-02-11 11:52:42 kulesa

我已经尝试过，但现在它改变了网址，但不会显示该组件。 – Toretto 2015-02-11 12:05:01

如果您手动更改网址，它会工作吗？可能你应该检查你的路线引用了正确的组件，而不是你正在转换的登录表单。 – kulesa 2015-02-11 12:08:42

我已经按照http://vimeo.com/channels/797633/page:5'第7课'为路由添加了一个链接，它工作正常。当我点击该链接时，它会重定向到该页面并显示结果，但不是上面的情况？ – Toretto 2015-02-11 12:12:16

这应该工作

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

来源

2015-09-08 06:38:22 KungWaz

它的工作对我来说，当我加入到反应元件特性需要路由器和使用的路由器是这样的：

// 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;

来源

2016-02-03 15:40:24

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

回答

相关问题