특정 작업 후 페이지 이동하기 - useNavigate, useLocation

이번에는 useNavigate의 사용법과, 이를 이용해 값을 가져오는 방법, 그리고 리액트에서 페이지 뒤로가기 버튼을 만드는 간단한 방법에 대해 설명할 것이다.

 

useNavigate란?

• 조건을 만족했을 시(로그인, 양식 제출 등), 혹은 특정 이벤트 발생 시 url을 조작할 수 있는 Hook
• 특정 조건을 달 수 있다는 점에서 Link와 차이점이 있다. Link는 a태그라고 생각하면 편하다.
• react v6부터 useHistory의 대체제로 등장했다. useHistory에서 사용했던 기능을 useNavigate에서도 사용할 수 있는 것이다.

 

기본 사용법

react router dom을 설치한 후 다음과 같이 코드를 작성한다.

설치 코드 : npm install react-router-dom

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

function Navigate() {
    const navigate = useNavigate()
    const onClick = () => {
        navigate('/이동경로')
    }

    return <button onClick={onClick}>Go Home</button>
}

 

useNavigate의 인자

---

1. state

이동경로로 이동할 시 해당 경로에 state 값을 인자로 넘긴다.

navigate( '/이동경로', { state: { key: valuse, key: valuse, ... } } )

 

이 값은 useLocation()를 사용해 가져올 수 있다.

const location = useLocation()
const locationKey = location.state.key

 

다음 예시에서는 navigate의 값에 id로 1, foo로 'bar'라는 값을 주었다.

버튼을 클릭할 시 두 값을 Location 컴포넌트로 전달하고, 컴포넌트에 해당값을 표기하도록 만들었다.

function Navigate() {
    const navigate = useNavigate()
    const onClick = () => {
        navigate('/location', {state: {id:1, foo:'bar'}})
    }

    return <button onClick={onClick}>Location</button>
}

function Location() {
    const location = useLocation()
    const id = location.state.id
    const foo = location.state.foo

    return (
        <>
            <p>id: {id}</p>
            <p>foo: {foo}</p>
        </>
    )
}

 

2. replace

navigate( '/이동경로', { replace: true or false } )

• true : 이동경로로 이동한 뒤, 뒤로가기를 해도 이전 페이지로 돌아갈 수 없다.
• false : 이동경로로 이동한 뒤, 뒤로가기가 가능하다.

 

페이지 뒤로가기, 앞으로 가기

---

useHistory에 비해 간단해졌다. useNavigate에서는 인덱스를 사용하면 된다.

 

const navigate = useNavigate()

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

 

 

참조

https://basemenks.tistory.com/278

https://curryyou.tistory.com/477

https://whales.tistory.com/140