react-router-dom v6 기준으로 작성되었습니다.

부모와 자식 관계가 아닌, 페이지 이동 시에 데이터를 전달하는 방법에 대해 알아보자.
페이지에서 useNavigate()로 값을 전달하고, 새로운 페이지에서 useLocation()으로 값을 받아오면 된다.

useNavigate()

• 페이지를 이동하면서 값을 전달한다.
• 사용 방법
  • 객체(navigate)에 useNavigate()를 초기화
  • navigate("/페이지 주소", { state: { 키: 값 } } )의 형태로 작성

클릭하면 /newpage라는 주소로 이동하면서 data1, data2를 보내는 함수를 작성해보자.

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

const navigate = useNavigate();
const clicked = () => {
    navigate("/newpage", { state: { data1: 1234, data2: 4567 } });
};

useLocation()

• 이동한 페이지에서 값을 가져온다.
• 사용 방법
  • useLocation()을 객체(location)에 초기화
  • 객체.state.키의 형태로 값을 가져온다.

앞에서 전달한 data1, data2를 변수에 할당해보자.

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

const location = useLocation();
const number1 = location.state.data1;
const number2 = location.state.data2;