[React]react-router-dom/ useNavigate() 값 전달 && useLocation() 값 가져오기

1. 값을 전달 할 페이지에서 useNavigate()를 import 해온다.

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

 

2. 값을 보낼 컴포넌트 안에 지정해준다.

  const navigate = useNavigate();

그리고

첫번째 app.js 에 route 된 페이지 파라미터, 두번째 {state : 값 } 형태로 보내준다.

 

onClick={ } 함수 만들어서 하거나,
현재 프로젝트에서는 axios 로 post로 값을 보내면서, 다음 페이지에 전달하기 위해 사용 했다.

 

navigate("/보낼페이지" , {state : { key : value , key : value ...}})

 

ex) 보낼 페이지

pay/btnGtp.jsx

          navigate("/payComplete", {
            state: {
              name: receiver,
              phoneNum: phone,
              address: receivingAddress,
              totalPrice: totalPrice
            },
          });

 

3. 받을 페이지 payComplete.jsx 에서 useLocation을 import 한다

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

그리고

const userInfo = useLocation();

지정하여 콘솔로 userInfo 를 찍어보면

이러한 형태가 나온다.

 

앞서 navigate 하면서 state 키에 지정된 값을 보내 줬던 것들이 들어 온것을 볼 수 있다.

 

각각 사용하고 싶은 값을 변수로 지정하여서 페이지에 표시 하면 된다.