useNavigate

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

useNavigate는 URL로 다른 컴포넌트로 이동할 수 있다.

---

Home 화면에서 Login 화면으로 이동

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

const Home = () => {
    const navigate = useNavigate();
    
    const onClickMove = () => {
    	navigate("/login");
    }
    
    return (
    	<button onClick={onClickMove}>
            이동하기
        </button>
    )
}​

---

Home 화면에서 Login 화면으로 이동하면서 값 전달 (Home.js)

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

const Home = () => {
    const navigate = useNavigate();
    
    const onClickMove = () => {
    	navigate("/login", {
            state: {
                id: 1
            }
        });
    }
    
    return (
    	<button onClick={onClickMove}>
            이동하기
        </button>
    )
}​

 

Login 화면에서 전달된 값 받기 (Login.js)

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

const Login = () => {
    const location = useLocation();
    const id = location.state.id;
    
    return (
    	<div>{id}</div>
    )
}​