登录后响应重定向（调度）

Question

在此类项目中成功登录后如何将我的网站重定向到主页：https://github.com/bradtraversy/mern_shopping_list操作 ts 文件 [actions/authActions.ts]：import axios from 'axios';import { returnErrors } from './errorActions';import {  USER_LOADED,  USER_LOADING,  AUTH_ERROR,  LOGIN_SUCCESS,  LOGIN_FAIL,  LOGOUT_SUCCESS,  REGISTER_SUCCESS,  REGISTER_FAIL} from './types';import { IAuthFunction, IConfigHeaders } from '../../types/interfaces';import { useHistory } from 'react-router-dom';//// Register Userexport const register = ({ name, email, password }: IAuthFunction) => (  dispatch: Function) => {  // Headers  const config = {    headers: {      'Content-Type': 'application/json'    }  };  // Request body  const body = JSON.stringify({ name, email, password });  axios    .post('/api/auth/register', body, config)    .then(res =>      dispatch({        type: REGISTER_SUCCESS,        payload: res.data      })    )    .catch(err => {      dispatch(        returnErrors(err.response.data, err.response.status, 'REGISTER_FAIL')      );      dispatch({        type: REGISTER_FAIL      });    });};// Login Userexport const login = ({ email, password }: IAuthFunction) => (  dispatch: Function) => {   // Headers  const config = {    headers: {      'Content-Type': 'application/json'    }  };  // Request body  const body = JSON.stringify({ email, password });  const history = useHistory();// <---------- ERROR HERE  axios    .post('/api/auth/login', body, config)    .then(res => {        dispatch({          type: LOGIN_SUCCESS,          payload: res.data        });        // const history = useHistory(); <----- tried placing it here too        // history.push("/dd");      }    )    .catch(err => {      dispatch(        console.log(err)        // returnErrors(err.response.data, err.response.status, 'LOGIN_FAIL')      );      dispatch({        type: LOGIN_FAIL      });    });};catch 错误返回“错误：无效的钩子调用。钩子只能在函数组件的主体内部调用...”

Answer 1

UseEffect()像这样使用：

import { useHistory } from 'react-router-dom';

//

const LoginForm = ({

    isAuthenticated,

    redirectTo, // <-- here

    error,

    login,

    clearErrors

}: ILoginForm) => {

    const history = useHistory();

    //

    useEffect(() => {

      if(redirectTo)

        history.push(redirectTo);

    });

}

const mapStateToProps = (state: IAuthReduxProps) => ({

    isAuthenticated: state.auth.isAuthenticated,

    redirectTo: state.auth.redirectTo, // <-- here

    error: state.error

});

export default connect(mapStateToProps, { login, clearErrors })(LoginForm);

接口.ts：

export interface IAuthReduxProps {

  auth: { isAuthenticated: boolean, redirectTo: string }; // <-- here added redirectTo

  error: IError;

}

authReducer.ts：

case REGISTER_SUCCESS:

  localStorage.setItem('token', action.payload.token);

  return {

    ...state,

    ...action.payload,

    isAuthenticated: true,

    isLoading: false,

    redirectTo: "/dd" // <-- here

  };