[React] useNavigate Hook에 대해 알아보자

---

 

■ useNavigate란 ?

■ 기본 사용법

■ 예시코드

---

 

안녕하세요. 🫤

오늘은 react-router-dom의 useNavigate Hook 사용법에 대해 포스팅하려고 합니다.

 

react-router-dom 설치 및 기본 사용법은 아래 포스팅을 참고해주시면 됩니다.

https://leebaek.tistory.com/154

[React] react-router-dom에 대해 알아보자 - 화면 전환

---

■ useNavigate란 ?

: 프로그래밍 방식으로 페이지를 이동할 수 있게 도와주는 Hook

 

일반적으로 react-router-dom에서 페이지 이동은 <Link /> 컴포넌트로 하게 되지만, 특정 이벤트 핸들러 안에서 페이지 이동이 필요할 때가 있습니다.

 

예를 들어,

- 로그인 성공 시 메인 페이지로 이동

- 폼 제출 후 결과 페이지로 이동

- 버튼 클릭 시 특정 경로로 이동

이럴 때 useNavigate가 필요합니다 !

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

const navigate = useNavigate();
navigate('/about');

---

■ 기본 사용법

useNavigate() Hook은 navigate() 함수를 반환합니다.

navigate() 함수에 경로 또는 숫자를 넣으면, 브라우저의 URL을 변경하면서 페이지를 이동시킬 수 있습니다.

코드를 보면서 이해해 보도록 합시다 !

---

1. 경로를 통해 이동하기

- navigate('/about');

- navigate()에서 경로 지정시 앞에 /를 붙이면 절대 경로, 생략하면 상대 경로입니다.

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

function NavigateExample() {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h2>useNavigate 사용 예제</h2>
      <button onClick={goToAbout}>소개 페이지로 이동</button>
    </div>
  );
}

 

- <Route />의 경로가 /about인 컴포넌트로 이동합니다.

---

2. 숫자로 이동 ( 히스토리 스택 )

- navigate(-1);

- navigate(1);

navigate(-1); // 이전 페이지로
navigate(1);  // 다음 페이지로

 

- 브라우저의 "뒤로 가기", "앞으로 가기"와 같습니다.

---

3. 옵션 사용 ( replace )

- navigate('/main', { replace: true });

navigate('/main', { replace: true });

 

- replace가 true일 시 현재 페이지를 새로운 페이지로 교체되지만, 히스토리 스택에 기록되지 않습니다.

- 주로 로그인, 회원가입 후 메인 페이지로 돌아가지 않도록 처리할 수 있습니다.

---

■ 예시코드

- 로그인 성공 후 메인 페이지로 이동

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 로그인 로직
    navigate('/main', { replace: true });
  };

  return <button onClick={handleLogin}>로그인</button>;
}

 

- 뒤로가기 기능

function BackButton() {
  const navigate = useNavigate();

  return <button onClick={() => navigate(-1)}>뒤로 가기</button>;
}

---