useRouteMatch()

react-router-dom (v5.3.0 기준) useLocation hook은 브라우저 주소와 path property에 입력된 주소와 일치하는지를 검사한다.

 

만약 브라우저 주소와 useLocation(path: string)의 path property가 일치하면 해당 path의 match 객체를 반환하고, 일치하지 않는 경우에는 null을 반환한다.

<Fig. 1>

 

이를 이용하면 중첩 Route에서 탭을 구현할 수 있다.

다음의 코드를 살펴보자.

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;
  }
`;  
  
  ...
  
  const priceMatch = useRouteMatch("/:coinId/price");
  const chartMatch = useRouteMatch("/:coinId/chart");
  
  ...
  
  <Tabs>
    <Tab isActive={chartMatch !== null}>  // 1Tab
      <Link to={`/${coinId}/chart`}>Chart</Link>
    </Tab>
    <Tab isActive={priceMatch !== null}>  // 2Tab
      <Link to={`/${coinId}/price`}>Price</Link>
    </Tab>
  </Tabs>

만약 브라우저 주소 형식이 <도메인>/:coinId/chart 라면,

priceMatch는 null이, chartMatch에는 match객체가 반환된다.

즉, 1Tab의 isActive는 값은 true, 2Tab의 isActive값은 false가 되어,

1Tab의 color는 props.theme.accentColor가, 2Tab의 color는 props.theme.textColor가 적용되게 된다.

<Fig. 2>

<Fig. 2>와 같이 CHART, PRICE 탭을 한 페이지 내에서 useRouteMatch를 통해 구현할 수 있다.

 

 

공식 문서

Declarative routing for React apps at any scale | React Router

 

 

요약

---

useRouteMatch("/:key/currentPath")  =>  match{}

useRouteMatch("/:key/somethingPath")  =>  null