[React] React Router (v6)에서 query parameter 사용하는 법

배경

react에서 query parameter로 받은 값을 서버에 전달하거나 서로 다른 라우터로 이동시에 query parameter를 담아서 redirect해야 하는 일이 생겼다. react router가 v6로 버전업이 되면서 기존에 v5에서 사용하던 방식과는 조금 달라졌다. v6에서 query parameter를 사용해보자.

 

목표

React Router v6에서 query parameter 값 받아오기

 

Query parameter 값 받아오기

특정 query parameter의  value만 받아오는 경우

1. 받아오는 컴포넌트에서 searchParams 선언

2. searchParams.get('쿼리 key') 로 값을 받아올 수 있다.

• 아래 예제의 경우 ?query=test 이다.

// localhost:3000/test?query=test
const Test = () => {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query'); // test

	return (
		<h2>{query}<h2>
	);
}

반응형

모든 query parameter의 key와 value를 받아오는 경우

1. 받아오는 컴포넌트에서 searchParams 선언

2. spread 문법을 통해서 key와 value를 이차원배열 형식으로 받아올 수 있다.

// localhost:3000/test?key1=test1&key2=test2
// [['첫번째 키', '첫번째 value'], ['두번째 키', '두번째 value']]
const Test = () => {
  const [searchParams] = useSearchParams();
  const queryList = [...searchParams]; // [['key1', 'test1'], ['key2', 'test2']]

  return (
    <h2>{query}<h2>
  );
}