[React - 9] useNavigate

useNavigate는 React Router v6부터 도입된 훅입니다. 

이 훅은 컴포넌트 내에서 프로그래밍 방식으로 라우팅을 제어할 수 있게 해줍니다. 

React Router v5 이전에서는 useHistory를 사용하여 이러한 동작을 수행했지만, 

v6에서는 useNavigate가 그 역할을 대신하게 되었습니다.

 

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

function MyComponent() {
  const navigate = useNavigate();
  const handleButtonClick = () => {
    // 다른 경로로 이동
    navigate('/about');
  };

  return (
    <button onClick={handleButtonClick}>
      Go to About
    </button>
  );
}

---

 

useNavigate의 navigate 함수에서 두 번째 매개변수로 사용할 수 있는 옵션은 다양합니다. 

React Router v6에서 이러한 옵션은 주로 네비게이션의 동작을 수정하거나 추가 정보를 전달하는 데 사용됩니다.

두 번째 매개변수의 주요 옵션들은 다음과 같습니다:

replace

Boolean 값을 가집니다. 기본값은 false입니다.

이 옵션을 true로 설정하면 현재 항목을 히스토리 스택에서 교체합니다.

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

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

  const handleReplaceClick = () => {
    // 현재 히스토리 항목을 '/replacement-path'로 교체합니다.
    navigate('/replacement-path', { replace: true });
  };

  return <button onClick={handleReplaceClick}>Replace Current History Entry</button>;
}

state

네비게이션 상태에 첨부할 추가 데이터입니다.

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

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

  const handleStateClick = () => {
    // '/path-with-state'로 이동하며 추가 상태 데이터 첨부
    navigate('/path-with-state', { state: { from: 'MyComponent' } });
  };

  return <button onClick={handleStateClick}>Go with State</button>;
}