230830 react router dom에서 useSearchParams로 쿼리 스트링 조작하기

230830 react router dom에서 useSearchParams로 쿼리 스트링 조작하기

 

 

특정 params 값 가져오기

const [searchParams, setSearchParams] = useSearchParams();
const room_id = searchParams.get('room_id')

 

기존 params에 특정 params 업데이트하기

const [searchParams, setSearchParams] = useSearchParams();
setSearchParams((prev) => ({...prev,room_id:'123'}));

 

특정 params 삭제하기

setSearchParams는 useState처럼 콜백 함수에서 기존 상태를 인자로 받을 수 있다. 

삭제는 URLSearchParams와 동일하게 delete를 통해 삭제한다.

차이점은 삭제한 params를 setSearchParams로 상태 변경해야 한다는 것이다.

const [searchParams, setSearchParams] = useSearchParams();
setSearchParams((prev) => {
    prev.delete('room_id');
    return prev;
});