如何使用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調用成功後重定向？

回答

相關問題