[React] useNavigate()와 useLocation()으로 페이지 이동하면서 값 전달하기

페이지를 이동하면서 값을 전달하고 싶을 때,

기존 페이지에서 useNavigate()로 값을 전달하고, 새로운 페이지에서 useLocation()으로 값을 받아오는 방법을 사용할 수 있다.

* React-dom-router v6 기준

---

useNavigate()

• 페이지를 이동하면서 값을 전달합니다.

1. useNavigate()를 객체에 초기화합니다.

2. 객체("/페이지 주소", { state: { 키: 값 } } )의 형태로 작성합니다.

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

const navigate = useNavigate();
const clicked = () => {
    navigate("/newpage", { state: { value: 1234 } });
};

navigate에 useNavigate()를 초기화하고, clicked가 실행되면 newpage로 이동하면서 1234를 전달합니다. 

 

useLocation()

• 이동한 페이지에서 값을 가져옵니다.

1. useLocation()을 객체에 초기화합니다.

2. 객체.state.키의 형태로 값을 가져옵니다.

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

const location = useLocation();
const number = location.state.value;

number에 1234의 값이 저장됩니다.

 

https://oliopasta.tistory.com/9

[React] 페이지를 이동하면서 값 전달하기: useNavigate()와 useLocation()

---

적용 코드

보내는 파일

import { useParams, useNavigate } from 'react-router-dom';
..
const { id } = useParams();
..
<button
  onClick={() => {
    navigate(`/update/${id}`, { state: { article } });
  }}
>

 

받는 파일

import { useLocation } from 'react-router-dom';
..
const location = useLocation();
..
const id = location.state.article.id;