Come reindirizzare dopo il successo di una chiamata ajax utilizzando React-router-component?

Question

Sto creando un'applicazione utilizzando l'architettura Facebook flux di React JS. Ho creato la parte base dell'app dove ho un modulo di accesso. Sto recuperando il risultato dal server del nodo per convalidare l'utente nello store, sto ottenendo il risultato dal server, Ora mi sono bloccato che come posso reindirizzare l'utente alla home page dopo il successo.

Ho letto sul componente del router di risposta e sono in grado di reindirizzare sul lato client ma non in grado di reindirizzare al momento del recupero dei risultati da ajax in Store. Mi aiuti per favore.

Answer 1

È necessario utilizzare la funzione transitionTo dal mix Navigation: http://git.io/NmYH. Sarebbe qualcosa di simile:

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

Questo dovrebbe funzionare

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

Ha funzionato per me quando ho aggiunto alle proprietà reagire elemento a richiedere per il router e usato il router in questo modo:

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