2. 파라미터와 쿼리 · GitBook

[utterances-bot]

2. 파라미터와 쿼리 · GitBook

https://react.vlpt.us/react-router/02-params-and-query.html

[sshusshu]

유동적인 페이지 주소를 정의할 때 파라미터와 쿼리 사용

파라미터: 특정 id 나 이름을 가지고 조회
쿼리: 키워드 검색, 요청 시 필요한 옵션을 전달

파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조
match 객체: 현재의 주소가 Route 컴포넌트에서 정한 규칙과 어떻게 일치하는지에 대한 정보
/:파라미터

쿼리는 라우트 컴포넌트에게 props 전달되는 location 객체에 있는 search 값
location 객체는 현재 앱이 갖고있는 주소에 대한 정보
search 값(문자열) 객체 형태로 변환시 qs 라이브러리 사용

[Doosies]

타입스크립트를 이용하시는 분이라면
아래와같이 param과 location을 받아올 수 있어요

location은
const location = useLocation();

params는
interface MatchProps {
username: 'velopert' | 'gildong';
}
const {username} = useParams();

와 같이 받아올 수 있습니다.
이는 리액트 라우트 5.1버전에 추가된 훅입니다.

[Qandi430]

react-router-dom v6 이상 쓰시는 분들은
useSearchParams 를 사용해 보세요

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

const [searchParams] = useSearchParams();
const detail = searchParams.get('detail') === 'true';

qs 없이 쿼리스트링을 편하게 가져올수 있습니다

[hueleev]

match 대신 사용

import { useParams } from 'react-router-dom';
...
const { username } = useParams();
const profile = profileData[username];