Nested Routes, useMatch, ReactRouterDomV6

참고 : 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>자리에 해당 컴포넌트 들어옴