react-router-dom v6에서 RouteComponentProps 안 쓸 때

✔️ 필요성

react-router-dom V6으로 업데이트되면서 RouteComponentsProps를 사용하지 않도록 변경되었다. 이 때 어떻게 변경해야할지 기록 - 

 

 

 

✔️ 문제 해결

그 전에는 match와 RouteComponentProps를 활용해서 아래와 같이 사용하고 있었는데

import { RouteComponentProps } from 'react-router-dom'

interface MatchParams {
	id: string
}

const Example = ({ match }: RouteComponentProps<MatchParams>) => {
	useEffect(() => {
		const paramId = match.params.id
	}, [match.params.id])
}

 

새롭게 생긴 useParams를 활용해서 좀 더 hook스럽게 param을 사용할 수 있다

import { useParams } from 'react-router-dom'

const PoiCongestion = () => {
	const params = useParams()

	useEffect(() => {
		const paramId = params.id;
	}, [params.id])
}