Question

我在BrowserRouter应用中使用了React/Redux，所以我不会创建history对象，也不会将其传递给BrowserRouter，因为它处理自己的历史记录。此刻，我嘲笑了登录功能，这是Login组件中的功能（该组件在login中调用authActions thunk）：

handleSubmit = (e) => {
        e.preventDefault();

        this.props.authActions.login({
            email: this.state.email,
            password: this.state.password
        });
    };

AuthActions映射到组件道具：

function mapDispatchToProps(dispatch) {
    return {
        authActions: bindActionCreators(authActions, dispatch)
    }
}

这是login在authActions中的重击：

export function login(userData) {
    return function (dispatch) {
        if(userData.email === 'test@test.com' && userData.password === 'pw'){
            sessionStorage.setLoggedUser(JSON.stringify(userData));
            dispatch(loginSuccess(userData));
            this.context.router.history.push('/');
        } else {
            dispatch(loginFail());
        }
    }
}

我收到未定义context的错误，但是成功登录后，应用程序导航到“ /”路由。我将context作为第二个参数传递给constructor组件中的super和Login方法。

class Login extends Component {
    constructor(props, context) {
        super(props, context);

现在，我的问题是。更改位置的最佳位置是什么？组件本身，还是动作（重击）？我之所以提到thunk，是因为我将更改代码并向后端进行一些异步调用。使用`BrowserRouter时，如何在组件及其绑定的操作中访问history对象？

Answer 1

我的建议是：更改componentDidMount生命周期挂钩中的位置。

您有一些props可以进行比较，进行一些操作等...

https://reactjs.org/docs/react-component.html#componentdidmount。

创建用于管理位置更改的HOC时甚至更好

更新

首先，否更改render函数中的位置，这将产生错误。

根据您的应用程序结构，有很多soloutins ... 另一个解决方案是使用“ componentWillReceiveProps”

componentWillReceiveProps(nextProps, nextState){
  if(nextProps.isLoggedIn===true&&this.props.isLoggedIn===false){
    nextProps.history.push('path_for_logged_in')
  }
}

要获取道具中的访问历史记录，您需要使用withRouter HOC将组件包装起来

import { withRouter } from 'react-router'


withRouter(YourComponent)

BrowserRouter-如何访问历史记录？更改组件位置还是实际位置？

1 个答案: