React Router Hook v6

1. useNavigate

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

export default function LoginButton () {
	// 히스토리의 기능을 대체
  	const navigate = useNavigate();
    const loginFn = () => {
        setTimeout(() => {
            navigate("/");
        }, 1000)
    }
    return(
        <button onClick={ loginFn }>로그인하기</button>
    );
}

2. useParams

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

export default function Profile (props) {
  	// 전달된 파라미터 값을 얻어올 수 있음
    const { id } = useParams();
    console.log(id, typeof id);
    return (
        <div>
            <h2>Profile 페이지 입니다.</h2>
            { id && <p> id는 { id } 입니다.</p> }
        </div>
    )
}