#5.7 Nested Routes part One

switch가 v6에서는 어떻게 사용되는지

instead of using state, using url directly
state, url 모두 사용가능하지만 user가 url로 직접 타고 들어갈 수 있기때문에 url선호

<Link to={`/${coinId}/chart`}>Chart</Link>
<Link to={`/${coinId}/price`}>Price</Link>
<Switch>
	<Route path={`/:coinId/price`}>
        <Price />
    </Route>
    <Route path={`/:coinId/chart`}>
        <Chart />
    </Route>
</Switch>

요런 식으로 아래에 렌더링이 된다

Route의 coinId(:coinId)는 동적 라우팅 매개 변수(dynamic route parameter)를 나타내는 부분. 이것은 사용자가 URL에서 특정 값 (이 경우 coinId)을 제공할 수 있도록 하며, 해당 값은 컴포넌트에서 사용할 수 있게게 된다.

useRouteMatch tell you if you're in a specific url
How to use => const prcieMatch = useRouteMatch("/:coinId/price");
console.log시 object를 얻고 exact값 true 지정한 url에 위치하고있다는 뜻
위가 아닐시 null

const Tab = styled.span < { isActive: boolean }> ``
<Tabs>
      <Tab isActive={chartMatch !== null}>
           <Link to={`/${coinId}/chart`}>Chart</Link>
      </Tab>
      <Tab isActive={priceMatch !== null}>
           <Link to={`/${coinId}/price`}>Price</Link>
      </Tab>
</Tabs>

useRouteMatch를 사용해서 styled components에 prop주기