react-router-dom v6에서 현재 url 가져오기

2021년 11월에 react-router-dom이 그간의 v5에서 v6로 업그레이드하였습니다

 

이에 맞춰서 코드를 변환시키다보니 react에서 현재 url을 가져오는 부분이 바뀌어서 조금 애를 먹었습니다.

 

기존에는 아래처럼 useRouteMatch()를 사용하고 있었어요

import { Link, useRouteMatch } from 'react-router-dom'
import { useHistory } from 'react-router'

...

const { path, url } = useRouteMatch()
const key = useRecoilValue(keyState)
const history = useHistory()

const clickHandler = () => {
    history.push(`${url}/${key}`)
    setPageChangeReady(false)
}

 

 

이제 v6에서는 react-router-dom에서 useLocation()을 가져와서 현재위치를 받아오고, useNavigate()를 활용해서 페이지간 이동을 할 수 있습니다

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

...

const key = useRecoilValue(keyState)
const navigate = useNavigate()
const location = useLocation()

const clickHandler = () => {
    navigate(`${location.pathname}/${key}`)
    setPageChangeReady(false)
}