React Router SPA의 스크롤 복원을 구현하는 방법

React 단일 페이지 응용 프로그램을 구축 중이며 Chrome 및 기타 브라우저에서 스크롤 복원이 예상대로 작동하지 않는 것으로 나타났습니다.

(가) github에 REPO 라우터-DOM 반응에, 그들은 브라우저가되는 것을 말한다 페이지가 스크롤 기본적으로 핸들에 시작하는 경우, 단일 페이지 응용 프로그램에 대한, 그리고 행동이 기존의 비 SPA 웹 페이지와 유사한 것 history.scrollRestoration으로 설정을 auto.

필요한 동작은 해당 페이지에 표시되어 있습니다.

1. 탐색시 위로 스크롤하면 맨 아래로 스크롤 된 새 화면이 시작되지 않습니다.
2. "뒤로"및 "앞으로"클릭에 대한 창의 스크롤 위치 및 오버 플로우 요소 복원 (링크 클릭 제외)!

그러나 탭이나 회전식 슬라이드가 포함 된 경로의 동작도 비활성화해야합니다.

다음 은 문제에 대한 Chrome 사양에 대한 링크 입니다.

OS X 용 Chrome 버전 78.0.3904.97 (공식 빌드) (64 비트)에서 관찰하고있는 것은 history.scrollRestoration manual설정 에서 기대하는 것 입니다. 즉, 페이지를 반 아래로 스크롤 하고 링크를 클릭하면 다음 페이지가 페이지의 반 아래로 스크롤되어 이전 페이지와 같은 지점으로 이동합니다.

history.scrollRestoration다양한 지점을 확인한 auto후 기본값 이 시작되어 유지되는 것을 발견했습니다 .

여기서 중요한 점은 @TrevorRobinson의 답변입니다. "스크롤 복원시 브라우저의 자동 시도 ... ... 대부분 단일 페이지 앱에서는 작동하지 않습니다 ..."Ok ...에 대한 일관된 지원을 찾았 history.scrollRestoration지만 실제로 스크롤 복원을 수행 할 때 브라우저가 엉망입니다. 그런 다음 여기 에 주목해야하므로 오늘 시간을 절약 할 수있었습니다.

그런 다음 수동 으로이 작업을 수행하는 방법을 찾고 앞으로 나아갈 길이 확실하지 않습니다. react-router-scrollReact Router v4와 호환되지 않지만이 질문의 최신 v5는 언급하지 않았습니다. v5도 호환되지 않는다고 가정해야합니까?

나는 앞으로 수있는 방법을 더 찾아, 약이 SO 응답 발견 그래서 라우터 V4 반응과 스크롤 복원을 처리하는 방법을 ...해야 그 가정 합니다 라우터 V5 반응 작업? 업데이트 : v5에서는 작동하지 않는 것 같습니다. 몇 가지 구성을 시도했습니다. 또한 React Router v4에서 완전히 작동하지 못했습니다. 나는 그것이 새로운 페이지에서 맨 위로 스크롤되어 최소한 살아 있다는 것을 알고 있었지만 역사의 회복은 일어나지 않았습니다.

또한 반응 라우터 스크롤 메모리 작업을 얻었지만 탭이나 회전 목마에 필요한 것과 같은 지정된 경로에서 스크롤을 비활성화 할 수있는 옵션이 없습니다 ... 작동하기 위해 해킹 할 수 있습니다.

oaf-react-router 사용을 고려 했지만 특정 경로의 스크롤 복원 또는 스크롤 투 탑 비활성화에 대한 문서에는 아무것도 언급되어 있지 않습니다. 편집 : 내 대답에 요약 된 것처럼 실제로 이것을 처리합니다.

내가 간과 한 것이 있습니까? 이 기능을 필요로하는 유일한 사람이 될 수 없기 때문에이 문제를 처리하기위한 표준은 무엇입니까? 내가 초라하고 실험적인 일을하는 것처럼 보이지만 정상적인 사이트처럼 스크롤하려면 내 사이트가 필요합니다.

이를 수행하는 한 가지 방법은 oaf-react-router 입니다. shouldHandleAction설정 에서 옵션을 사용하십시오 . 함수가 전달 previousLocation되고 nextLocation스크롤을 재설정 / 복원해야하는지 여부를 결정하고 false그렇지 않은 경우 반환 하는 데 사용할 수 있습니다.

const history = createBrowserHistory();

const settings = {
   shouldHandleAction: (previousLocation, nextLocation) => {
       // Inspect/compare nextLocation and/or previousLocation.
       return false // false if you don't want scroll restoration.
   }
};

wrapHistory(history, settings);

oaf-react-router는 React Router v4 및 v5와 함께 작동하며 많은 SPA 라우터가없는 액세스 가능성을 처리하므로 현재 가장 완벽한 솔루션 일 수 있습니다.

흥미롭게도 설명서는이 기능에 대해 자세히 설명하지 않습니다.

다른 사람이 효과가 있고 더 많은 표준으로 간주되는 솔루션을 가지고 있다면 여기에 답변을 제공하십시오. 선택한 답변을 변경하는 것이 좋습니다.