# 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 활용)
'개발(Development) > React(리액트)' 카테고리의 다른 글
[React] create-react-app 리액트 버전 변경 및 에러 처리 방법 (0) | 2022.06.23 |
---|---|
[React] Toast-UI Viewer 글자 크기, 행 간격, 마진 등 CSS 조정 방법 (0) | 2022.05.31 |
[React] Router v6 리다이렉트 및 경로 이동 처리(새로고침X): 404에러 페이지 렌더링 활용 (0) | 2022.05.23 |
[React] Toast-UI Editor 게시물 수정 방법(에디터 html/markdown표시) (0) | 2022.05.18 |
[React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) (0) | 2022.05.16 |
댓글