React - useNavigate 사용법

useNavigate는 useHistory를 대체하여 react router dom v6에서 도입되었다. useHistory와 동일하게 url을 변경하여 페이지를 이동시키는데 사용된다.

useNavigate 기본 사용법

import { useNavigate } from 'react-router-dom' // 6버전 이상에서만 사용 가능

const navigate = useNavigate()
navigate('/test') // /test url로 이동

기본적인 사용법은 위와 같이 useNavigate를 import한 후, navigate()에 이동할 url를 추가하여 사용한다. 예를 들어 버튼 onClick 함수에 navigate()를 정의하면 버튼을 클릭했을 때, 입력한 url로 이동하게 된다. 위의 방법 외에도 navigate()의 첫번째 파라미터에 세부적인 경로를 지정할 수 있다.

첫번째 파라미터

navigate({
    // 첫번째 파라미터
    hash: 'mango', // URL의 해시 부분
    pathname: '/fruit', // 경로를 지정
    search: '?sort=name' // 쿼리 문자열 추가
})

• hash: URL의 해시 부분을 지정하며 # 이후의 부분에 해당된다. hash를 mango로 지정하면 /fruit#mango 로 변하게 된다.
• pathname: 이동할 경로를 나타내며 navigate(’/fruit’)과 같은 역할을 한다.
• search: 쿼리 문자열을 추가하며 /fruit?sort=name과 같이 변하게 된다.

두번째 파라미터

두번째 파라미터는 useNavigate의 옵션을 지정한다. replace, state 외에도 제공하는 다른 옵션이 있다.

navigate({
    // 첫번째 파라미터
    hash: 'mango', // URL의 해시 부분
    pathname: '/fruit', // 경로를 지정
    search: '?sort=name' // 쿼리 문자열 추가
}, {
    // 두번째 파라미터
    replace: true, // 현재의 히스토리 교체 여부
    state: { // 상태값 전달
        from: 'mango'
    }
})

• replace: 히스토리 항목의 교체 여부를 설정한다. true로 설정하면 URL 히스토리를 쌓지 않고 첫번째 파라미터에 정의된 내용에 따라 URL을 교체한다.
• state: key, value 형식으로 이동하는 경로에 상태값을 전달한다. 해당 URL을 Route로 받는 컴포넌트에 상태값이 전달되는 것을 의미한다.

state와 useLocation

여기서 state로 전달된 값은 useLocation을 사용하여 상태값을 확인할 수 있다.

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

const location = useLocation()
const from = location.state.from // 상태값 확인

key가 from인 경우 위와 같이 useLocation의 location.state를 통해 해당 상태값을 확인할 수 있다.

---

참고 사이트:

https://reactrouter.com/en/main/hooks/use-navigate

useNavigate | React Router

 

https://stackoverflow.com/questions/68825965/react-router-v6-usenavigate-doesnt-navigate-if-replacing-last-element-in-path

React Router v6 useNavigate() doesn't navigate if replacing last element in path