[React] 네비게이트 훅(useNavigate) 프롭스(Props) 전달 방법

https://velog.io/@gin2808/React-useNavigate%EB%A1%9C-state-%EB%84%98%EA%B8%B0%EA%B8%B0

[React] useNavigate로 state 넘기기

예시

////////// 프롭스 전달하기 예시
import { useNavigate } from "react-router";

const SignIn = () => {
  const navigate = useNavigate();
  const login = () => {
  		// OnSignIn 페이지로 이동하며 props를 내린다
        navigate("/OnSignIn", {
        state: { name: "SoonCoding" },
      });
  }


  return (
    <div>
      <button onClick={() => login()}>로그인</button>
    </div>
  );
};

export default SignIn;

////////// 프롭스 전달 받기 예시
import React from 'react';
import { useLocation } from 'react-router-dom';

const OnSignIn = () => {
    const location = useLocation(); 
    console.log("네비게이트 전달 데이터\n"+ location.state.name); // 프롭스로 전달받은 데이터
    
    return (
        <div>
            OnSignIn
        </div>
    );
};

export default OnSignIn;