>source

이런 종류의 프로젝트에 성공적으로 로그인 한 후 내 웹 사이트를 홈페이지로 리디렉션하려면 어떻게해야합니까?

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 User
export 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 User
export 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 오류는 "오류 : 잘못된 후크 호출입니다. 후크는 함수 구성 요소의 본문 내에서만 호출 할 수 있습니다 ..."를 반환합니다.

  • 답변 # 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);
    
    

    interface.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
      };
    
    

  • 답변 # 2

    useHistory React 컴포넌트에서만 사용할 수있는 '후크'입니다. 대신 사용해보세요.

    window.location.href = 'https : // your-path';

    후크 문서, https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions

관련 자료

  • 이전 angular - Angular2 +에서 함수 바인딩
  • 다음 javascript - JS 클래스 내에서 깨진 이미지 숨기기