[React] 페이지 이동시, 파라미터 전달 및 취득 방법

1. useNavigate를 사용하여 state로 전달

[ 이동 전 페이지 ]

const navigate = useNavigate();
navigate('/home', {state:{id: 1, name: 'test'}});

경로로 이동하면서 파라미터로 state의 id, name을 넘긴다.

 

[ /home으로 이동 후 ]

const location = useLocation();
const state = location.state as { id: number; name: string };
const id = state.id;
const name = state.name;

useLocation 훅을 이용하여 location.state로 id, name 인자를 전달 받는다.

state의 타입 값이 unknown이기 때문에 위와 같이 타입을 정의해 준다.

 

2. get 방식으로 전달 되는 쿼리 파라미터

const locationLogin = useLocation();
const searchParams = new URLSearchParams(locationLogin.search);
const userId = searchParams.get('user_id');

- useLocation()으로 search 값을 획득한다.

- search 속성의 값을 URLSearchParams 객체로 생성한다.

- 키의 해당하는 값을 get으로 반환받는다.

 

3. location.href/reload/assign 으로 전달 되는 parameter

// button
onClick={() => location.assign(`/menu/team/${teamId}`)}

// main.tsx
{
	path: 'menu/team/:teamId',
	element: <MyTeamDetailPage />,
},

// teamMatchDetail.tsx
const { teamId } = useParams();

- useParams로 해당하는 :teamId에 해당하는 파라미터를 전달받는다.