React) useNavigate 기본 사용 방법 ... react-router-dom

useNavigate는 사용자가 직접 클릭하지 않아도(Link의 방식으로)  사용자를 다른 곳으로 이동시키고 싶은 경우에 사용한다.

 

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

export default function Header() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/about");
  };
  return (
    <header>
      <ul>
        <li>
          <Link to='/'>Home</Link>
        </li>
        <li>
          <button onClick={handleClick}>About</button>
        </li>
      </ul>
    </header>
  );
}

위 코드는 About 이라는 버튼을 눌렀을 때, /about으로 사용자를 이동시킨다.

 

useNavigate Hooks를 사용했으며, navigate(" url ") 형식으로 이용한다.

 

 

(Navigate 와는 다르다! ... Navigate는 replace to 를 활용하여 유저를 다른 곳으로 이동시키는 react router dom 컴포넌트)

 

---

참고)

 

- https://nomadcoders.co/react-masterclass/lectures/4044