Dynamic route

path의 콜론 이름이 useParams 객체의 키가 된다

/product/:id는 주소 조각을 읽을 자리이고, /product/123으로 들어오면 컴포넌트는 {id: "123"}을 입력값처럼 사용한다.

Route 경로

/product/:id처럼 동적 자리의 이름을 먼저 정한다.

/product/456에서 456은 :id 위치에 들어온 값이다.

컴포넌트 안에서 const {id} = useParams()로 읽는다.

id로 상품 데이터나 API 요청 대상을 고른다.

값이 있으면 상세 화면, 없으면 찾을 수 없음 화면을 보여준다.

match

상품명, 가격, 설명을 렌더링하고 현재 제품 ID를 함께 표시한다.

empty

라우트는 맞았지만 조회 결과가 없으므로 상세 컴포넌트 안에서 안내 화면을 렌더링한다.