useChildMatches hook

useChildMatches hook은 가장 가까운 매치부터 가장 리프-모스트 매치까지의 모든 자식 RouteMatch 객체를 반환합니다. 현재 매치는 포함되지 않으며, 현재 매치는 useMatch hook을 사용하여 얻을 수 있습니다.

[!IMPORTANT] 라우터에 대기 중인 매치가 있고 해당 매치가 대기 구성요소 폴백을 표시하는 경우, router.state.matches 대신 router.state.pendingMatches가 사용됩니다.

useChildMatches options

useChildMatches hook은 단일 선택적 인수인 options 객체를 허용합니다.

opts.select option

• 선택 사항
• (matches: RouteMatch[]) => TSelected
• 제공될 경우, 이 함수는 라우트 매치와 함께 호출되며 반환 값은 useChildMatches에서 반환됩니다. 이 값은 얕은 비교를 사용하여 hook이 부모 구성요소를 다시 렌더링해야 하는지 결정하는 데에도 사용됩니다.

opts.structuralSharing option

• 타입: boolean
• 선택 사항
• select에 의해 반환된 값에 대한 구조적 공유를 활성화할지 구성합니다.
• 자세한 내용은 렌더링 최적화 가이드를 참조하세요.

useChildMatches returns

• select 함수가 제공된 경우, select 함수의 반환 값.
• select 함수가 제공되지 않은 경우, RouteMatch 객체 배열.

Examples

import { useChildMatches } from "@tanstack/react-router";
 
function Component() {
  const childMatches = useChildMatches();
  // ...
}