React 12-2 Router v6 (useNavigate, useParams)

 - Router에서 지원하는 hooks 몇 개만 알아보자!!

 

useNavigate

 - 페이지를 이동 시키고 싶을 때 사용하는 것으로 v5에서는 location.push 형태롤 사용했던 것을 router hook으로 만든 것이다.

   변수에 useNavigate()을 할당하고 btn에 onCilck을 선언한 후 onCilck에 반응하는 함수에 변수명("url")을 입력하면 끝!!

import { Link, useNavigate } from 'react-router-dom';

function Header() {
    const navigate = useNavigate();
    const onAboutClick = () => {
        navigate("/about");
    };

    return (
        <header>
            <ul>
                <li>
                    <Link to={"/"}>Home</Link>
                </li>
                <li>
                    <button onClick={onAboutClick}>About</button>
                </li>
            </ul>
        </header>
    );
}

export default Header;

 

 

---

useParams

 - url에 잇는 parameter 값을 가져오는 router에서 지원하는 커스텀 hooks이다. 사용 방법도 간단하다.

 

예)

// url -> /user/1

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

function User() {
    const { userId } = useParams();
    console.log(userId) // '1'을 가지고 온다.

    return(
        <div>
        </div>
    );
}

export default User;