Header: Nav 로 스크롤 전환하기

// Header.tsx
export default function Index(){
  const routeMatch = useRouteMatch(['/Home', '/About', '/Skills', '/Experience']);

  const scrollHandler = (e: string) => {
    document.getElementById(e)?.scrollIntoView({
      behavior: 'smooth',
    });
  };

  return ( ... )
}

function useRouteMatch(patterns: readonly string[]) {
  const { pathname } = useLocation();

  // 주솟값 매칭
  for (let i = 0; i < patterns.length; i += 1) {
    const pattern = patterns[i];

    // 기본값이 "/"일 때 "/Home"과도 일치하도록 처리
    if (i === 0 && pattern === '/') {
      if (pathname === '/') {
        return '/Home';
      }
    }

    const possibleMatch = matchPath(pattern, pathname);
    if (possibleMatch !== null) {
      return possibleMatch.pattern.path;
    }
  }

  return null;
}

react-router를 활용한 주소 매칭에 따른 페이지 전환

choigirang / portfolio

Header: Nav 로 스크롤 전환하기 #1