[React] useNavigate으로 props을 주기

useHistory, useNavigate

---

버튼을 누르면서 해당 페이지를 넘어갈 때 props를 주면서 넘어가야 되는 경우가 있다.
이 때문에 useHistory라는 것을 찾아봤는데, react-router-dom이 6버전으로 바뀌면서
useHistory의 기능인 go, goBack, goForward의 내용을 모두 navigate으로 통일시켰다.
그리고 이를 index로 넣음으로 해결했다.

useHistory를 그 전 버전동안 계속 사용해서 그런지 내용이 많아 useHistory을 이용하여 처음에 구현하였지만 버전에 맞지 않아 오류가 생겼다. 이에 useNavigate로 바꾸어서 할려고 했지만 생각보다 내용이 많지 않아 적어본다.

 

 

해당 오류

Failed to compile ./src/pages/UserForm/_UserForm.js Attempted import error: 
'useHistory' is not exported from 'react-router-dom'. 
This error occurred during the build time and cannot be dismissed.

일반적인 navigate 이용 방식으로는 useNavigate()함수를 이용하여 만든 다음
navigate으로 함수를 만든 후, return부분에 선언할때 onClick으로 해당 함수만 불러오게끔 한다.
이때 아래와 같은 형태로 원하는 주소에 해당 내용을 넘겨주면 된다.

state:{넘기고 싶은 내용}

 

예제 1

const onClickImg = () => {
    navigate(`/comment/id/등등 내가 원하는 주소`,`전달하고 싶은 인자들`);
  };

<img src={...} alt={...} onClick={onClickImg} />

 

예제 2

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

여기서 사용하는 것은 import를 진행하고 그 밑에 바로 navigate을 선언한다.
하지만 버튼을 클릭하였을 때 해당 navigate에 주고 싶은 내용이 달라질 때는 저 방식으로 사용하기 힘들다.
이에 Button의 onClick함수에서 고쳐주는 것이 좋다.

 

 

수정한 형태

let navigate = useNavigate();

onClick={() => {
                navigate(`/defaulthowpage`,
                  { state: { needKind: firstData?.kind, needImages: firstData?.images } });
              }}

이처럼 메인 함수 시작전에는 navigate하나면 선언해주고 return문 밑에 onClick함수에서 navigate을 이용해주면 된다.
그리고 그 state에 넣어주고 싶은 달라진 내용을 적어주면 된다.

 

 

useLocation

받는 형태는 딱히 달라진 것이 없다고 한다. 형태는 다음과 같다.

const item = useLocation();
const itemform = item?.state as any;

const itemImage = itemform.needImages;
const itemKind = itemform.needKind;

useLocation()을 이용하여 내용을 받을 것을 하나 선언하고 item.state을 이용하여 그 안의 내용물을 사용하기 위한 변수를 하나 더 선언해준다. 이 state안에 받아온 내용들이 있으므로 그것을 사용하면 해결된다.