React) useNavigate() 파라미터 전달 & 취득 방법

useNavigate() 파라미터 전달,
useLocation()파라미터 수신 방법

1. 페이지 이동시 파라미터 전달 방법

• useNavigate()훅으로 navigate함수를 취득한다.
• navigate()함수의 첫번째 인자에 이동할 경로, 두번째 인자의 state속성에 파라미터를 넣어준다.

  navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) 

ex)

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

export default function Test() {
  const navigate = useNavigate();

  // 버튼 클릭시 호출
  const move = () => {
    // 두번재 인자의 state 속성에 원하는 파라미터를 넣어준다. (id, job을 넣어봤다)
    navigate('/test2', {
      state: {
        id: 1,
        job: '개발자'
      }
    });
  };
  return (
    <div>
      <button onClick={move}>이동</button>
    </div>
  );
}
 

2. 이동한 페이지에서 파라미터 취득 방법

• useLocation() 훅으로 location을 취득한다
• location.state로 전달받은 파라미터를 취득할 수 있다.

 location.state.키 

ex)

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

export default function Test2() {
  // 1. useLocation 훅 취득
  const location = useLocation();

  // 2. location.state 에서 파라미터 취득
  const id = location.state.id;
  const job = location.state.job;
  
  return (
    <div>
      <p>id: {id}</p>
      <p>job: {job}</p>
    </div>
  );
}