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.

score 9 · Answer 1 · edited Feb 15 '15 at 23:44

9

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

edited Feb 15 '15 at 23:44

lobati

9,284
5
40
61

answered Feb 11 '15 at 11:52

kulesa

2,964
20
11

I have tried it but now it changed the url but won't shows that component. – Toretto Feb 11 '15 at 12:05
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. – kulesa Feb 11 '15 at 12:08
I have added a link at the top by following http://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? – Toretto Feb 11 '15 at 12:12
2

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. – kulesa Feb 11 '15 at 13:04

score 2 · Answer 2 · answered Feb 03 '16 at 15:40

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;

score 1 · Answer 3 · answered Sep 08 '15 at 06:38

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

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

3 Answers3

Linked