React Router V6 hook정리

useNavigate

V6부터 useHistory → useNavigate 로 사용한다. 로그인해서 redirect 시키고 싶거나, 페이지 이동시 접근권한 없을때 주로useNavigate 를 쓰면 된다. 단순히 이동하는 경우에만 Link 를 쓰면 될듯하다.

const navigate = useNavigate()
    const onAboutClick = () => {
        navigate("/about")
    }
			return <button onClick={onAboutClick}>About</button>

function Button() {
        const navigate = useNavigate()
        return <button onClick={()=>navigate('/users')}>유저보기</button>
    }

useParams

파라미터 정보를 가져올 때 사용하면 되는 훅.
useParams 훅은 < Route path >와 일치하는 현재 URL에서 동적 매개변수의 key/value 쌍 객체를 반환한다. 하위 경로는 상위 경로에서 모든 매개변수를 상속한다.
useParams 정보를 변수에 저장하고, 파라미터값을 사용할 수 있다.

import { useParams } from "react-router-dom";

function App(){
	const params = useParams();
	
	return(
		<div>파라미터{params}</div>
		//users/1 인경우 파라미터가 1이니까 ‘파라미터1’ 
	)
}

useSearchParams

search파라미터 수정, url에서 search파라미터 읽어내는걸 도와주는 훅이다.

URLSearchParams

ㄴ URL의 문자열을 대상으로 많은 유틸리티 메서드를 정의한다. search파라미터 다루는것을 도와준다.

const [readSearchParams, setSearchParams] = useSearchParams()
console.log(readSearchParams)

콘솔로 보면 url정보는 없지만, URLSearchParams의 메소드를 사용해야하기 때문에 객체를 하나 얻는다.

import { useSearchParams } from 'react-router-dom'; 

const [readSearchParms, setSearchParams] = useSearchParams()
    setTimeout(()=> {
        setSearchParams({
            day: 'today',
            tomorrow: '123'
        })
    })

다양한 훅은 공식문서 참고