react-router-dom(v6) path 경로에 맞게 조건부 랜더링_matchPath

문제

특정 페이지에 들어갔을 경우, 조건부 랜더링을 해주기 위해서 react-router-dom 내 matchPath()를 사용하여 다음과 같이 코드를 작성한 경험이 있었다.

const TopNav = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const isAuthView = () => {
    const currentPathname = location.pathname;
    if (
      matchPath(currentPathname, { path: "/login" }) ||
      matchPath(currentPathname, { path: "/login" })
    )
      return true;
    else return false;
  };

  if (isAuthView()) return null;
  else
    return (
      ( ... )
    );
};

 

useLocation()을 사용하여 현재 클라이언트 측에서 라우팅 된 path 경로를 가져오고 지정된 path 경로와 일치하는지 여부를 matchPath()를 통해 확인한 뒤에 결과값을 토대로 조건부 랜더링을 해주었다.

 

하지만 해당 코드 토대로 다른 프로젝트 내에서 똑같은 방식으로 경로 비교를 해 주었더니, 조건부 랜더링이 제대로 동작되지 않은 문제가 발생하였다.

 

문제해결

구글링 해본 결과 stackoverflow에서 해당 문제에 대한 답을 찾을 수 있었다.https://stackoverflow.com/questions/61235191/react-router-v6-check-if-path-matches-a-pattern

React-Router V6 check if path matches a pattern

react-router-dom 라이브러리가 버전 6으로 업데이트되면서 matchPath의 사용 방식이 달라져서 제대로 된 결과를 확인할 수 없었던 것이다.

 

원래는 다음과 같이 matchPath 첫 번째 인자로 현재 경로를 넣어주고 두 번째 인자에는 비교될 경로를 객체로 랩핑하였다.

matchPath(현재 경로, {path: 비교 경로})

 

버전 6이상부터는 해당 방식이 아래와 같이 객체로 맵핑하지 않고 바로 비교 경로를 첫 번째 인자에 넣어주는 것을 바뀌었다.

matchPath(비교 경로, 현재 경로)

 

이를 토대로 다음과 같이 해당 코드를 수정하였고 문제를 해결할 수 있었다.

const isAuthView = () => {
    const currentPathname = location.pathname;
    if ( // 로그인 및 회원가입 페이지일 경우에 true 값을 리턴
      matchPath("/login", currentPathname) ||
      matchPath("/register", currentPathname)
    )
      return true;
    else return false;
  };