react-routerでログイン後の自動リダイレクトを行う。

リアクト・ルーターv3**」のご紹介です。

私はこうしています。

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

ルーターv4を再起動する。

これで、React Router v4 で `` コンポーネントを使用できるようになりました。

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

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

ドキュメント

リアクト・ルーターv0.13について

Router インスタンス Router.create から返される は受け渡し可能で（React コンポーネント内であれば コンテキストオブジェクト から取得可能）、新しいルートに移行するために使用できる transitionTo](https://github.com/rackt/react-router/blob/master/docs/api/RouterContext.md#transitiontoroutenameorpath-params-query) といったメソッドを含んでいます。

React Router v2 。

質問はすでに回答されていますが、ここで与えられた解決策のいずれにも含まれていなかったため、私のために機能した解決策を投稿することは重要だと思います。

まず、「LoginForm」コンポーネントでルーターコンテキストを使用しています。

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

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

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

PS:React-routerバージョン2.6.0に取り組んでいます。

React Router v3 。

コンポーネントの外に移動します。 --------------------------------。

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

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

render(
  ,
  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。

React Router v4.2.0 。

React-16.2.0 を使用しています& React-router-4.2.0 。

そして、私はこのコードによって解決策を得ます。 this.props.history.push( "/");。

私の作業コード:。 。 .then(response => response.json())。 .then(データ=> {。 if(data.status == 200){。 this.props.history.push( "/");。 consolor.log( 'Successful Login');。 }。 })。 。

私はこの文書redirect-on-login-and-logoutをフォローしていました。

また、「return< Redirect to = '/' />」を試してみましたが、運が悪いので、これはうまくいきませんでした。

ルーターv3に反応します。

内部コンポーネントのナビゲート。

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

import {withRouter} from 'react-router'

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

export default withRouter(Foo);

withRouter(コンポーネント、[オプション])。 。 別のコンポーネントをラップして強化するHoC(高次コンポーネント)。 ルーター小道具を備えた小道具。 。 withRouterProps = {。 .componentProps、。. ルーター、。 パラム、。 場所、。 ルート。 }。

コンポーネントにパスを入れると、コンポーネントが返されます。 ラップされたコンポーネント。 。 ルーターをラッパーコンポーネントのプロップとして明示的に指定できます。 コンテキストからルーターオブジェクトをオーバーライドします。

あなたのお店では：

data.router.transitionTo('user');

とルーターが持っています：

ルート名="user" ハンドラ={User}"`。

ユーザーはルートハンドラーです