[React] Link로 데이터 전달하기

프로젝트를 진행하며Link로 페이지를 이동하고 데이터도 함께 전달해야 할 경우에 recoil을 사용해서 값을 전달해도 되지만, props처럼 값을 바로 넘기는 방법에 대해서도 확인해 봤습니다.

아래와 같이 state에 데이터를 전달해줍니다.

<li>
  <Link to={`/find`} state={{ type: 'pw'}}>비밀번호 찾기</Link>
</li>
<li>
  <Link to={`/find`} state={{ type: 'id'}}>아이디 찾기</Link>
</li>

받는 곳에서는 useLocation을 import 받은 다음 아래와 같이 사용할 수 있습니다.

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

function FindingForm() {
  const location = useLocation();
  const type = location.state;

---

참고

• https://v5.reactrouter.com/web/api/Link/to-object
• https://ko.reactjs.org/docs/legacy-context.html
• https://reactrouter.com/docs/en/v6/components/link-native