web-dev-qa-db-ja.com

反応ルーターを使用したログイン後の自動リダイレクト

react/react-router/fluxアプリケーションにFacebookログインを作成したかった。ログインイベントにリスナーを登録しました。ユーザーがログインしている場合、ユーザーを'/dashboard'にリダイレクトしたいのですが、どうすればよいですか？ location.Pushは、ページを完全にリロードした後を除き、あまりうまく機能しませんでした。

reactjsreactjs-fluxreact-router
46
Daniel Schmidt

React Router v0.13

Routerインスタンス Router.createから返される を渡すことができます（または、Reactコンポーネント内にある場合は、 コンテキストオブジェクト ）、およびメソッド transitionToなど を含み、新しいルートへの移行に使用できます。

16
Michelle Tilley

React Router v3

これが私がすることです

var Router = require('react-router');
Router.browserHistory.Push('/somepath');

React Router v4

これで、React Router v4で<Redirect>componentを使用できます。

<Redirect>をレンダリングすると、新しい場所に移動します。新しい場所は、サーバー側のリダイレクトのように、履歴スタックの現在の場所を上書きします。

import React, { Component } from 'react';
import { Redirect } from 'react-router';
export default class LoginComponent extends Component {
    render(){
        if(this.state.isLoggedIn === true){
            return (<Redirect to="/your/redirect/page" />);
        }else{
            return (<div>Login Please</div>);
        }
    }
}

ドキュメント https://reacttraining.com/react-router/web/api/Redirect

30
Sajjad Ashraf

React Router v2

質問はすでに回答されていますが、ここで提供されているソリューションのいずれにも含まれていないため、私にとって有効なソリューションを投稿することが重要だと思います。

最初に、LoginFormコンポーネントでルーターコンテキストを使用しています

LoginForm.contextTypes = {
  router: React.PropTypes.object
};

その後、routerコンポーネント内のLoginFormオブジェクトにアクセスできます。

handleLogin() {
  this.context.router.Push('/anotherroute');
}

PS：React-routerバージョン2.6.0での作業

11
Bruno Henrique

React Router v3

コンポーネントの外側をナビゲートする

このようなルーターでアプリを作成します

// Your main file that renders a <Router>:
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'

render(
  <Router history={browserHistory} routes={routes} />,
  mountNode
)

ReduxミドルウェアまたはFluxアクションのような場所：

import { browserHistory } from 'react-router'

// Go to /some/path.
browserHistory.Push('/some/path')

// Go back to previous location.
browserHistory.goBack()

react-router/tree/v3/docs

3
Anatoliy Litinskiy

React Router v4.2.0

私はReact-16.2.0＆React-router-4.2.0

そして、私はこのコードthis.props.history.Push("/");で解決策を得ます

私の作業コード：

    .then(response => response.json())
        .then(data => {
            if(data.status == 200){
                this.props.history.Push("/");
                console.log('Successfully Login');
          }
        })

私はこのドキュメントをフォローしていました redirect-on-login-and-logout

私もreturn <Redirect to='/' />を試してみましたが、不運なことに、これはうまくいきませんでした。

3
MD Ashik

React Router v3

コンポーネント内の移動

コンポーネント内部にリダイレクトする必要がある場合は、withRouterデコレーターを使用する必要があります。デコレータはあなたの代わりにコンテキストを使用します。

import {withRouter} from 'react-router'

fucntion Foo(props) {
    props.router.Push('/users/16');
}

export default withRouter(Foo);

withRouter（コンポーネント、[オプション]）

ルータの小道具で小道具を強化するために別のコンポーネントをラップするHoC（高次コンポーネント）。

withRouterProps = {... componentProps、router、params、location、routes}

コンポーネントを渡すと、ラップされたコンポーネントが返されます。

ルーターコンポーネントをラッパーコンポーネントの支柱として明示的に指定して、コンテキストからルーターオブジェクトをオーバーライドできます。

1
Stanislav Mayorov