React에서는 props로 하위컴포넌트에 state를 전달할 수 있지만 페이지 이동시 state가 초기화 되기 때문에 state를 전달하려면 다른 방법이 필요하다.

1. Link로 넘겨주기

데이터를 넘기는 페이지

<Link to = ‘/otherpage’ state={{ data: data}}>

데이터를 받는 페이지

import {useLocation} from ‘react-route-dom’;  

const location = useLocation();
const data = location.state.data

2. Navigator로 넘겨주기

데이터를 넘기는 페이지

import { useNavigate } from 'react-router';

const handleClick = (event) => {
const navigate = useNavigate();
navigate('/otherpage', { state: event.target.value });
}

데이터를 받는 페이지

import { useLocation } from "react-router";

const Edit = () => {
const { state } = useLocation();
console.log(state);
}