인프런 커뮤니티 질문&답변

김범진님의 프로필 이미지
김범진

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

노드 리액트 기초 강의 #30 로그인 페이지 (2)

props.history.push('/') 에서 자꾸 에러가 발생합니다.

작성

·

4.9K

2

https://github.com/overman623/boiler-plate/blob/master/client/src/components/views/LoginPage/LoginPage.js#L29-L37

강의 잘듣고 있습니다.

처음 해보는것이라 따라해보면서 하고있는데, 아무리 따라해도 이 부분이 막히고 있습니다.

Uncaught (in promise) TypeError: Cannot read property 'push' of undefined

라는 에러가 나와서 많이 어렵습니다. 도움을 부탁드립니다.

답변 5

19

위 방법으로도 안되시는 분들은 여기 참고하셔도 좋을것 같아요!

저처럼 react-router-dom v6 사용하시는 분들은 

import { useNavigate } from "react-router-dom";

LoginPage 함수 내부에서 아래 처럼 선언 해주시고

const navigate = useNavigate();

dispatch promise then 부분에 

if (response.payload.loginSuccess) {
navigate(-1);
} else { ... }

저는 이런 식으로 해서 해결했습니다.

좋은 강의 잘 듣고 있습니다~~!!

와... 은인이십니다 ㅠㅠㅠㅠ 감사합니다 ㅠㅠㅠㅠ

감사합니다!!

너무감사합니다ㅠㅠ

감사합니다 .대협!!

갑사합니다 ㅠ

정말 감사합니다!!  아무리 해도 안돼서 삽질중이었는데 버전 차이었군요 ㅎㅎ

슨상님 캄사합니다. 존경합니다 ㅠㅠ

덕분에 해결했어요~! 감사합니다. 그런데 원래 의도대로 하려면 navigate('/')로 하는게 좋을 것 같네요.

!!!!

useNavigate는 react v6 에서 useHistory 가 변화한 것이라고 합니다. useHistory 에서 사용하던, window의 history를 이용한 navigate 기능도 할 수 있습니다.

가급적 useNavigate를 사용하는 것이 좋아보입니다.

8

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요 김범진님 !  

loginpage 파일안에  

위에는 

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

이 부분은 넣어주시고 

맨아래 부분에는 

export default withRouter(LoginPage)

이렇게 바꿔주세요 ^^ !!!

1

John Ahn님의 프로필 이미지
John Ahn
지식공유자

앗 그랬군요ㅜㅜ  수고하셨습니다 !!!

정말 좋은 강의 감사합니다. 

큰 도움 받고있습니다. 

0

저는 강사님이 말씀하신대로 해서 해결되었습니다! 왜 저렇게 하면 해결되는 건지 궁금합니다 !

0

김범진님의 프로필 이미지
김범진
질문자

답변감사합니다.

자체 해결하였습니다.

코드상에 오타가 있었습니다.

histroy로 잘못입력했습니다.

좋은강의 잘듣고 있습니다.

김범진님의 프로필 이미지
김범진

작성한 질문수

질문하기