React useNavigate 사용법

 

React에서 페이지 이동할 때 많이 쓰이는 useNavigate에 관해 알아보도록 하겠습니다.

useNavigate를 사용하기 위해서는 먼저 'react-router-dom'이라는 패키지를 설치해야 합니다..

npm i react-router-dom

 설치가 끝났으면, 다음 예시를 살펴보도록 하겠습니다.

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

const TestCode = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/new-route");
  }

  return <button onClick={() => handleClick()}>Go to new route</button>;
};

export default TestCode;

TestCode라는 컴포넌트가 있습니다.

컴포넌트 내에 const navigate 라는 변수를 만들어주고 useNavigate()를 할당해줍니다.

아래에는 "Go to new router"라는 샘플 버튼을 만들어줍니다.

이 버튼을 클릭했을 때 동작하는 handleClick 함수를 만들어줍니다.

함수의 내용은 navigate("/new-route") 인데 handleClick이 실행되었을 때

현재 URL에서 /new-route를 붙여준다는 것입니다.

즉, http://localhost:3000/new-route로 이동하게 되는 것입니다.

new-route로 이동하기 위해서는 Router.js에서 Route path 설정이 되어 있어야 합니다~~~!

프론트에서 많이 쓰이는 것이니 필히 익혀두시길 바랍니다.