참고 : https://velog.io/@soryeongk/ReactRouterDomV6
Nested Route 설정 = 자식 Route들을 부모 element의 Outlet으로 위치 지정
http://localhost:3000/btc-bitcoin/price
http://localhost:3000/btc-bitcoin/chart
<Route path="/:coinId" element={<Coin />}>
<Route path="price" element={<Price />} />
<Route path="chart" element={<Chart />} />
</Route>
Coin.tsx
<Overview>
<OverviewItem>
<span>Total Suply:</span>
<span>{priceInfo?.total_supply}</span>
</OverviewItem>
<OverviewItem>
<span>Max Supply:</span>
<span>{priceInfo?.max_supply}</span>
</OverviewItem>
</Overview>
<Outlet />
UseMatch = URL path 이름에 대해 패턴 일치 시키고 일치 여부 반환
const priceMatch = useMatch("/:coinId/price");
- http://localhost:3000/btc-bitcoin/price => console.log(priceMatch)결과
<Tabs>
<Tab isActive={chartMatch !== null}>
<Link to={`/${coinId}/chart`}>Chart</Link>
</Tab>
<Tab isActive={priceMatch !== null}>
<Link to={`/${coinId}/price`}>Price</Link>
</Tab>
</Tabs>
1.Price 탭 클릭시 url=> http://localhost:3000/btc-bitcoin/price
2.useMatch 결과 priceMatch=true
3.<Tab>
의 style props 적용되서 해당 탭 색상 변환
4.url 주소가 바뀌었으므로 nested router 적용으로 <Outlet>
자리에 해당 컴포넌트 들어옴