[React] useNavigate와 useLocation을 이용해 페이지 이동시 데이터 보내기

📌 useNavigate와 useLocation

useNavigate는 이동 기능 외에 데이터 전송 기능도 가지고 있다. 두 번째 인자에 이동시킬 페이지에 함께 보낼 데이터를 지정해줄 수 있다!
그리고 현재 페이지의 pathname을 알려주는 hook인 useLocation을 통해 데이터를 받을 수 있다.

📌 용례

SelectBox.tsx

const OnClickHandler = async () => {
  sendToServer();
  const res = await sendToServer();
  const data: string | null = await res.json();
  gotoNext("/menu", { state: { data: data } });
};

• gotoNext가 navigate function이다. 첫 번째 인자에는 이동할 라우터의 path name을, 두 번째 인자에는 전달할 데이터(서버로부터 받아온 데이터)를 담았다.

MenuPage.tsx

export default function MenuPage() {
  const location = useLocation();
  const data: string | null = location.state.data;

• menu page에서 console.log(location)을 찍어보면 해당 캡쳐본이 출력된다. 내부에 pathname과 state가 들어있는 것이 보인다.
• 따라서 location.state.data으로 데이터를 뽑아내서 사용하면 된다.

참고