成功登录后重定向到主路径| React，Redux

Question

堆栈溢出的人好！我想要一个用户在他/她成功登录到我的应用程序时被重定向。但是我无法让它工作。我认为我可以在某人登录后在我的行动中添加承诺，但显然不是。

这里是我的认证行动：

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 :(
     }) 
    } 
} 

当我检查我在开发者控制台我得到一个有效响应的应用程序，但我也得到这样的：Unhandled Rejection (TypeError): Cannot read property 'history' of undefined。

感谢您的阅读！

Answer 1

您可以添加一个回调函数：

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(); 
    } 
} 

，并在您的组件：

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

Answer 2

不能与函数定义的阵营组件通过this.props访问的道具。您可以使用类定义组件，也可以将“历史”道具添加到组件功能的道具参数中：{email, password, history}

此外，不要忘记将组件链接到路由器，使用withRouter并使用链接的版本在你的代码中。 通常我们使用类似

export const Login = withRouter(LoginWithoutRouter)

Answer 3

感谢你的时间来帮我解决这个问题。最终我真的很懒，只是写了这个：

window.location.href = '/'