[React] useNavigate()

useNavigate는 양식이 제출되거나 특정 이벤트가 발생할때 url을 조작할 수 있는 인터페이스를 제공한다.

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

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

  const onClickImg = () => {
    navigate("../success", {replace: (true or false) / state : (any)});
  };

  return (
      <img src={...} alt={...} onClick={onClickImg} />
  );
}

export default Func;

useNavigate의 첫번째 인자는 주소를 받으며 두번째 인자로는 replace와 state 인수를 사용한다.

• replace (true or false) : true일 경우 navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 이전의 페이지로 돌아가지 않고 자신의 메인 페이지(”/”)로 돌아가게 된다. false(기본값)일 경우 뒤로가기가 가능하다.
• state (any) : navigate(to, { state })와 같은 형태로 사용 가능하다. to에는 <Link>에서 사용한 to=' '와 동일한 내용을 넣어주면 된다.

예제) HistorySample.js

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

function HistorySample() {
    const navigate = useNavigate();
    const goBack = () => {
        const confirm = window.confirm('이전 페이지로 이동하시겠습니까?');
        if (confirm) { // yes를 클릭하면
            navigate(-1); 
            // 이동할 페이지의 주소나 index 값을 넣는다. 음수는 이전, 양수는 다음페이지 
            // -1임으로 한페이지 뒤로 간다는 뜻
        }
    };

    const goHome = () => {
        navigate('/');
    };

    return (
        <div>
            <button onClick={goBack}>뒤로가기</button>
            <button onClick={goHome}>홈으로</button>
        </div>
    )
}

export default HistorySample;