[React] useNavigate()로 state 전달하기

firebase를 이용해 로그인 페이지를 만들어서 로그인했을 때 사용자 정보를 메인페이지로 전달할 때 유용하게 사용했다.

useNavigate()를 통해 페이지 이동하면서 state 값을 전달하고, useLocation()을 통해 데이터를 전달 받았다.

 

login.jsx 데이터를 전달할 페이지

import { useNavigate } from "react-router-dom";
.
.
.
const navigate = useNavigate();
  const goToHome = (userId, displayName, photoURL) => {
    navigate("/", {
      state: {
        id: userId,
        name: displayName,
        profileImg: photoURL,
      },
    });
  };

로그인이 성공하면 goToHome이 실행되고 Router를 통해 "/" 경로로 이동하면서 state(아이디, 이름, 프로필 사진 url)를 전달했다.

 

 

main.jsx 데이터를 전달받을 페이지

import { useLocation } from "react-router-dom";
.
.
.
const location = useLocation();
console.log("state", location.state);