Как перенаправить после успеха из вызова ajax с помощью React-router-component?

Я создаю приложение, использующее Facebook flux архитектуру React JS. Я создал базовую часть приложения, в которой у меня есть форма входа. Я получаю результат с сервера узла для проверки пользователя в магазине, я получаю результат с сервера, теперь я застрял в том, как я могу перенаправить пользователя на домашнюю страницу после успеха.

Я читал о компоненте реагирующего маршрутизатора, и я могу перенаправить на стороне клиента, но не могу перенаправить во время получения результата из ajax в магазине. Помогите, пожалуйста.


reactjs reactjs-flux
person Toretto    schedule 11.02.2015    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Вам необходимо использовать функцию transitionTo из миксина Navigation: 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>;
  }
});
person kulesa    schedule 11.02.2015
comment
Я пробовал, но теперь он изменил URL-адрес, но не показывает этот компонент. - person Toretto; 11.02.2015
comment
Это работает, если изменить url вручную? Вероятно, вам следует убедиться, что ваш маршрут ссылается на правильный компонент, а не на ту же форму входа, с которой вы переходите. - person kulesa; 11.02.2015
comment
Я добавил ссылку вверху, следуя vimeo.com/channels/797633/page:5 'Урок 7' по маршрутизации, и он отлично работает. Когда я нажимаю на эту ссылку, он перенаправляется на эту страницу и показывает результат, но не в случае выше? - person Toretto; 11.02.2015
comment
Я только что заметил, что вы используете react-router-component, а не react-router. Виноват! Я лично не использовал react-router-component, но быстро заглянул в исходный код, вместо Navigation mixin и transitionTo функции вы должны включить NavigatableMixin в свой, а затем использовать navigate('my_url) `для перенаправления. - person kulesa; 11.02.2015

arrow_upward
2
arrow_downward

У меня это сработало, когда я добавил к свойствам элемента реакции необходимое для маршрутизатора и использовал маршрутизатор следующим образом:

// 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;
person Dennis Nerush    schedule 03.02.2016

arrow_upward
1
arrow_downward

Это должно работать

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>;
    }
});
person KungWaz    schedule 08.09.2015