router(페이지 이동하기)

Link를 이용한 페이지 이동

import { Link } from 'react-router-dom'

function App(){
   return(
   //...
      <Link to="/">메인 페이지</Link>
      <Link to="/page1">페이지1</Link>
   )
}

페이지 이동 버튼은 <Link>를 이용한다.

 

useNavigate()를 이용한 페이지 이동

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

function App(){
  const navigate = useNavigate()
  
  return (
    //...
    <button onClick={()=>{ navigate('/page1') }}>버튼</button>
  )
}

useNavigate()를 쓰면 페이지를 이동시켜주는 함수가 남는다. 코드가 실행되면 함수 안의 페이지로 이동가능하다.

navigate()에 숫자를 넣으면 앞으로 가기, 뒤로 가기 기능을 구현할 수 있다.(-2은 뒤로 2번, 1은 앞으로 1번)