CRYPTO TRACKER -3-

Nested Route

routes 안에 있는 route를 뜻한다. 섹션이 많이 나뉘어지거나 웹사이트에서 탭을 사용할때 많이 도움이 된다.

코인 상세 페이지에서 보여줄 2개의 페이지가 필요하다 price와 chart 페이지다.
routes 폴더에 두개의 tsx 파일을 만들어주고 Coin.tsx 파일에 Switch와 Route를 import해줬다.
기존에 있던 useLocation과 useParams 도 react-router에 포함되니 잊지말고 같이 넣어주자.

import { Switch, Route, useLocation, useParams } from "react-router";

          <Switch>
            <Route path={`/${coinId}/price`}>
              <Price />
            </Route>

            <Route path={`/${coinId}/chart`}>
              <Chart />
            </Route>
          </Switch>

어렵지 않다. 기존에 라우트 설정했던것 처럼 Switch 사이에 Route를 넣고 그안에 원하는 컴포넌트와 path를 설정해주면 된다.

그다음 Coin 페이지에서 Chart와 Price 탭을 나눠보자

탭을 나눌때 useRouteMactch라는 hook을 사용해봤다.

이 hook은 우리가 특정한 URL에 있는지 여부를 알려주는 기능을 한다.

  const priceMatch = useRouteMatch("/:coinId/price");
  const chartMatch = useRouteMatch("/:coinId/chart");

다음과 같이 우리가 해당 페이지에 있으면 console로 true로 표시해준다.

styled components로 가서 props를 추가하자.

const Tab = styled.span<{ isActive: boolean }>`
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 7px 0px;
  border-radius: 10px;
  color: ${(props) =>
    props.isActive ? props.theme.accentColor : props.theme.textColor};
  a {
    display: block;
  }
`;

isActive가 참이냐 거짓이냐에 따라서 accentColor를 theme에 적용시킨다.
true면 푸른색 만약 false이면 흰색으로 표시된다.

이 isActive는 여기에서 받아온다.

          <Tabs>
            <Tab isActive={chartMatch !== null}>
              <Link to={`/${coinId}/chart`}>Chart</Link>
            </Tab>
            <Tab isActive={priceMatch !== null}>
              <Link to={`/${coinId}/price`}>Price</Link>
            </Tab>
          </Tabs>