[React] useNavigate 사용하기

이번 시간에는 useNavigate 를 사용하여 라우팅을 해보도록 하겠습니다.

 

1. useNavigate를 import 합니다.

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

 

 

2. navigate 함수에 첫번째 인자에는 경로를, 두번째 인자에는 데이터를 넣어줍니다.

    navigate('/address', { state: { element : "hi" } });

 

* 2번에서 경로를 보낼 때에는 해당 경로에 알맞는 컴포넌트가 미리 지정이 되어있어야합니다. (Routes.js)

 

  <Route path="/address" element={<AddressPage />} />

 

 

3. 라우터를 통해 받은 데이터 값을 읽습니다.

 

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

 const { state } = useLocation();