Remix의 해시 라우팅!

Remix은 최신 풀스택 React 프레임워크입니다. Remix는 널리 사용되는 반응 라우팅 라이브러리인 react-router-dom를 사용하는 파일 기반 라우팅을 지원합니다.

Remix 사용자는 내부적으로 react-router의 BrowserRouter를 사용하기 때문에 Hash Routing(스크롤을 트리거하는 ID 기반 라우팅)을 실제로 수행할 수 없습니다.

예를 들어 다음과 같은 링크를 만들면

<Link to="#footer">
    Go to bottom
</Link>

확실히 브라우저 URL을 변경하지만 id가 바닥글인 요소까지 아래로 스크롤하지는 않습니다.

물론 이 동작을 수행하는 더 쉬운 방법이 있습니다.

클라이언트 측 라우팅 끄기

특수 링크 구성 요소에 reloadDocument 소품을 추가하면 일반 앵커 태그처럼 작동하기 시작합니다.

<Link to="#footer" reloadDocument>
    Go to bottom
</Link>

이렇게 하면 클라이언트 측 라우팅이 꺼지고 브라우저가 전환을 처리할 수 있습니다mentioned here.

해시 라우팅에서 클라이언트 측 라우팅과 스크롤 동작을 모두 원할 때까지는 괜찮습니다.

부작용을 통한 수동 스크롤

이에 대한 해결 방법은 useEffect 내부의 경로 변경으로 인해 생성된 부작용을 포착하고 스크롤을 수동으로 처리하는 것입니다.

프로젝트의 루트(root.jsx 파일)에서 remix가 제공하는 useLocation 후크에서 위치 개체를 가져와야 합니다. 그런 다음 해당 위치 객체에 의존하는 useEffect를 생성해야 합니다. 위치 개체에는 URL의 해시 부분을 제공하는 해시라는 속성이 있습니다. URL이 www.example.com/#footer인 경우 #footer. 그런 다음 해당 ID를 포함하는 요소를 조회하고 scrollIntoView 메서드를 사용하여 수동으로 아래로 스크롤할 수 있습니다.

const location = useLocation();

useEffect(() => {
  if (location.hash) {
    const el = document.querySelector(location.hash);
    if (el) {
      el.scrollIntoView();
    }
  }
}, [location]);