[React] useNavigate로 prop 전달하기

컴포넌트를 통해서만 prop이 전달되는 줄 알았는데, 이야기하다보니 `useNavigate`를 통해서도 prop을 전달할 수 있을 것 같아 검색해보니 가능한 일이었다!

 

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

const CurrentPage () => {
  ...
  const navigate = useNavigate();
  navigate('/otherpage',{state:<전달하고 싶은 prop object>})
  ...
}

 

위 코드처럼 하면 `react-router-dom`에 의해 연결된 component에서 `useLocation`을 이용해서 prop을 받을 수 있다.

예를 들어 `name`과 `year`를 prop으로 넘기고 싶다면 아래와 같이 작성하면 된다.

navigate('/otherpage', {state:{name:'React', year:2024}});

 

그러면 `navigate`로 이동한 컴포넌트에서 아래처럼 prop을 받을 수 있다.

// /otherpage 컴포넌트
import { useLocation } from 'react-router-dom';

const OtherPage() => {
  ...
  const {state:{name, year}} = useLocation(); // 구조 분해 할당
  ...
}