[리액트] - useNavigate

useNavigate 컴포넌트는 router-dom 라이브러리에서 지원하는 컴포넌트로 Link의 컴포넌트와
다르게 함수형을 선언하여 페이지 이동 기능을 구현할때 자주 사용하는 기능입니다.

import 우선 설정

사용을 위해 react-app에서

import { Routes, Route, Link, useNavigate } from 'react-router-dom'

필요한 컴포넌트를 우선 import 시킨 후 시작합니다.

페이지 이동을 위한 useNavigate()

페이지 이동을 위해서 Link를 사용할 수 있으나 useNavigate 또한 활용할 수 있습니다.

function App(){
  let navigate = useNavigate()
  
  return (
    (...생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

useNavigate 함수를 이용한 예시코드입니다.
사용한 함수를 이용해 navigate('/detail') 코드가 실행되면 /detail 페이지로 이동할 수 있습니다.

useNavigate 추가 기능
useNavigate 괄호() 자리에 숫자를 집어넣는다면 페이지 앞으로 가기, 뒤로 가기 기능개발 또한 가능합니다.

ex)

<Route path="*" element={ <div>존재하지 않는 페이지입니다.</div> } />