web-dev-qa-db-ja.com

React-router-componentを使用してajax呼び出しから成功した後にリダイレクトする方法は？

Facebook fluxのReact JSアーキテクチャを使用してアプリケーションを構築しています。ログインフォームがあるアプリの基本部分を作成しました。ストアでユーザーを検証するためにノードサーバーから結果をフェッチしています。サーバーから結果を取得しています。成功した後、ユーザーをホームページにリダイレクトするにはどうすればよいかわかりません。

反応ルーターコンポーネントについて読みましたが、クライアント側でリダイレクトできますが、ストアのajaxから結果をフェッチするときにリダイレクトできません。私を助けてください。

reactjsreactjs-flux
10
Toretto

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

ルーターに必要なreact要素のプロパティを追加し、次のようにルーターを使用すると、うまくいきました。

// 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;
2
Dennis Nerush

これはうまくいくはずです

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