[React-router-dom] 페이지 변환 시 파라미터 반환 받기

useNavigate가 반환하는 함수를 통해 다른 URL로 이동할 수 있습니다. 이때 값을 전달할 수 있는데요.

const navigate = useNavigate();
...

navigate('/someURL', {state: data}); // state를 키로 가져야 합니다.

someURL 페이지에서는 데이터를 useLocation으로 받을 수 있습니다.

공식문서에는 useLocation 훅 설명이 불친절합니다.

side effect를 수행할 때 사용하라고 되어 있는 정도입니다.

어쨌든 받아서 출력해봅시다.

import { useLocation } from 'react-router-dom';
const Content = () => {
  const locate = useLocation();
  console.log(locate);
  return <h1>Content</h1>;
};

export default Content;

state 프로퍼티에 data라는 키로 들어가 있는 걸 확인할 수 있습니다.