[React] Router v6: useNavigate() 파라미터 전달&취득 방법 - useLocation()

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

react-router-dom v6 에서 

1. useNavigate() 로 페이지를 이동하면서 파라미터를 전달하는 방법

2. useLocation() 으로  파라미터를 취득하는 방법

을 정리한다.

---

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

1) useNavigate() 훅으로 navigate 함수를 취득한다.

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

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

 

아래 예제코드는, 버튼을 클릭하면 '/test' 경로로 이동하면서 id, job을 인자로 넘긴다.

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. 이동한 페이지에서,  파라미터 취득 방법

1) useLocation() 훅으로 location을 취득한다.

2) locaiton.state 로 전달 받은 파라미터를 취득할 수 있다.

-  location.state.키 

 

아래 예제코드는 전달 받은 id와 job을 취득하여 화면에 표시한다.

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>
  );
}

 

* 타입스크립트의 경우, state의 타입이 unknown이므로 아래와 같이 타입을 지정해주면 된다.

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

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

  // 2. location.state 에서 파라미터 취득 - 타입을 지정해줌.
  const state = location.state as { id: string; job: string };
  const id = state.id;
  const job = state.job;
  return (
    <div>
      <p>id: {id}</p>
      <p>job: {job}</p>
    </div>
  );
}

---

GET 방식 접속 시, 경로에서 쿼리 파라미터 취득 방법은 아래 글 참고

[React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용)