Jak przekierować po sukcesie z ajax call używając React-router-component?

Question

Buduję aplikację przy użyciu architektury Facebook flux z React JS. Mam podstawową część aplikacji, w której mam formularz logowania. Pobieram wynik z serwera węzła, aby zweryfikować użytkownika w sklepie, otrzymuję wynik z serwera, Teraz utknąłem, że w jaki sposób mogę przekierować użytkownika do strony głównej po sukcesie.

Przeczytałem o składniku routera reagowania i jestem w stanie przekierować po stronie klienta, ale nie jest w stanie przekierować w momencie pobierania wyniku z ajax w sklepie. Proszę pomóż mi.

Answer 1

Należy użyć funkcji transitionTo z zestawu Navigation: http://git.io/NmYH. To byłoby coś takiego:

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

To powinno działać

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

Answer 3

on pracował dla mnie, kiedy dodany do reagują właściwości elementu require do routera i używany router tak:

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