[React]useNavigate Hook

✅useNavigate

React Router에서 사용할 수 있는 useNavigate hook에 대해 알아보자.

기존에는 useHistory 훅을 많이 사용했던 거 같은데 useNavigate가 좀 더 직관적이고 쉬워서 근래 많이 이용하는 추세다.

 

When to Use?

- 이전 페이지와 다음 페이지로 넘어갈 때

- 특정 url 로 이동할 때 

 

How to Use?

npm install history@5 react-router-dom@6

위 명령어로 react-router 을 install 한다.

 

그리고 사용하고자 하는 파일에서 useNavigate를 import한다

import {useNavigate] from 'react-router'

그리고 변수로 선언

let navigate - useNavigate();

1. 특정 페이지으로 이동

function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home')
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

2. 이전 페이지로 이동

function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(-1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

-1을 인자로 넘겨주면 이전 페이지로 넘어간다.

 

3. 다음 페이지로 이동

function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );

1을 인자로 넘겨주면 다음 페이지로 넘어간다.