How to redirect after success from ajax call using React-router-component?

Question

I am building a application using Facebook flux architecture of React JS. I have build the basic part of app where I have a login form. I am fetching the the result from node server to validate user at the store, I am getting the result from server, Now I got stuck that how can I redirect the user to home page after success.

I have read about the react router component and I am able to redirect at the client side but not able to redirect at the time of fetching result from ajax in Store. Please help me.

Cornelison

Answer 1

You need to use the transitionTo function from the Navigation mixin: http://git.io/NmYH. It would be something like this:

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

Springs

I have tried it but now it changed the url but won't shows that component. – Cornelison

Does it work if you change the url manually? Probably you should check that your Route references the correct component and not the same login form that you're transitioning from. – Springs

I have added a link at the top by following vimeo.com/channels/797633/page:5 'Lesson 7' for routing and it works fine. When I click on that link it redirect to that page and shows the result but not in the case of above? – Cornelison

I just noticed that you're using react-router-component and not react-router. My bad! I personally didn't use react-router-component, but quickly looking into source code, instead of Navigation mixin and transitionTo function, you should include NavigatableMixin to your and then use navigate('my_url)` to do a redirect. – Springs

Answer 2

It worked for me when I added to the react element properties a require for the router and used the router like this:

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

Grumous

Answer 3

This should work

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

Falsify