useNavigate로 데이터 보내기

1. 간단한 소개

navigate(to, { state={}, replace=false })

특정 이벤트 후에 페이지를 이동하고 싶을 때 사용한다.

ex. form 제출 시

 

사용 예시

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

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

먼저 useNavigate를 import 해온 뒤 navaigate로 선언해주고 to 부분에는 이동하고자 하는 url을 state부분에는 넘기고 싶은 데이터를 넣어준다.

2. 내가 활용한 방식

선택한 상품을 주문 페이지로 넘길 때,

상품을 수정할 때 또 다시 axios로 데이터를 불러오는 것 보다 useNavigate로 넘겨주는게 더 낫다는 생각을 했다.

 

우선 처음에 상품 등록할 때는 productBoxData라는 이름으로 null을 보내준다. (아무것도 보내주지 않으면 오류 발생)

        <MsIconButton
          src={plusIcon}
          value="상품 업로드"
          wd="168px"
          onClick={() => {
            navigate('/productedit', { state: { productBoxData: null } });
          }}
        />

만약 상품을 수정버튼을 누른다면

      <Btn
        bg="#21BF48"
        onClick={() => {
          navigate('/productedit', {
            state: { productBoxData: productBoxData[i] },
          });
        }}
      >
        수정
      </Btn>

이미 등록된 data를 보내준다.

 

data를 가져와서 활용하는 법은

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

useLocation을 import 해온 뒤

  const productBoxData = location.state.productBoxData;

원하는 변수명을 지정하고 할당해준다.

 

 

📌틀린 점이나 용어 혼용을 한 경우가 있다면 댓글 남겨주세요!