ログイン成功後にホームパスにリダイレクトする| React、Redux

Question

こんにちは人々がスタックオーバーフロー！ユーザーが私のアプリケーションに正常にログインしたときにリダイレクトされるようにしたい。しかし、私はそれを働かせることはできません。私は誰かがログインしてから私の行動に約束を加えることができると思ったが、明らかにそうではなかった。

は、ここに私の認証アクションです：Unhandled Rejection (TypeError): Cannot read property 'history' of undefined：

import axios from 'axios' 
import settings from '../settings' 
import { withRouter } from 'react-router-dom' 

axios.defaults.baseURL = settings.hostname 

export const login = ({ email, password }) => { 
    return dispatch => { 
    return axios 
     .post('/tokens', { email: email, password: password }) 
     .then(response => { 
     this.props.history.push('/') // Not working :(
     }) 
    } 
} 

私は有効な応答を取得するデベロッパーコンソールでの私のアプリを点検し、私もこれを取得

。

読んでいただきありがとうございます！

import axios from 'axios' 
import settings from '../settings' 
import { withRouter } from 'react-router-dom' 

axios.defaults.baseURL = settings.hostname 

export const login = ({ email, password }, callback) => { 
    return dispatch => { 
    return axios 
     .post('/tokens', { email: email, password: password }) 
     .then(response => { 
     //this.props.history.push('/') // Not working :(
     // do your stuff here ... 
     }) 
     callback(); 
    } 
} 

をし、あなたのコンポーネントで：

Answer 1

あなたは、コールバック関数を追加することができますが、機能に定義されたリアクトコンポーネントにthis.props経由小道具にアクセスすることはできません

this.props.login({email, password},() => { 
     this.props.history.push('/dashboard'); 
    }); 

Answer 2

。 {email, password, history}

また、withRouterを使用して、リンクされたバージョンを使用して、コンポーネントをルータにリンクすることを忘れないでください。クラスを使用してコンポーネントを定義するか、コンポーネントの関数のpropsパラメータに "history"あなたのコードで。 通常、私たちは、私はこの問題を解決を助けるために自分の時間を割いて

export const Login = withRouter(LoginWithoutRouter)

Answer 3

おかげのようなものを使用。最終的に私は本当に怠け者になり、これを書きました。

window.location.href = '/'