React Router SPAのスクロール復元を実装する方法

Reactの単一ページアプリケーションを作成していますが、スクロール復元がChrome（およびおそらく他のブラウザー）で期待どおりに動作していないようです。

react-router-dom githubリポジトリには、ブラウザーが単一ページアプリのスクロールをネイティブで処理し始めていることを示すページがあり、にhistory.scrollRestoration設定されている場合、動作は従来の非SPA Webページの動作と同様になります。auto。

私が必要とする動作はそのページに示されています：

1. ナビゲーションを上にスクロールして、一番下までスクロールした新しい画面を開始しないようにします。
2. 「戻る」および「進む」クリック（ただし、リンククリックは除く）でのウィンドウとオーバーフロー要素のスクロール位置の復元

しかし、タブやカルーセルを含むルートの動作も無効にする必要があります。

問題に関するChromeの仕様へのリンクは次のとおりです。

OS XのChromeバージョン78.0.3904.97（公式ビルド）（64ビット）で私が観察しているのは、私がhistory.scrollRestoration manual設定から期待しているように見えるものです。つまり、ページの下半分までスクロールしてリンクをクリックすると、次のページが前のページと同じポイントまでページの下半分までスクロールされます。

私はhistory.scrollRestorationさまざまな時点でを確認しましたが、それが開始して留まることauto、デフォルト、

ここでの重要なポイントの1つは、@ TrevorRobinsonの回答によるものです。「スクロール復元時のブラウザの自動試行... ...ほとんどの場合、単一ページのアプリでは機能しません...」OK ...の一貫したサポートが見つかりましたhistory.scrollRestorationが、どうやらブラウザは、実際にスクロールの復元を行っているのがおかしい。次に、ここで注意する必要がありますで。これ、今日の時間を節約できました。

次に、これを手動で行う方法を調べましたが、先の方法がわかりません。react-router-scrollは、React Router v4と互換性がないと述べていますが、この質問の時点で最新のv5については触れていません。では、v5にも互換性がないと思いますか？

私は前方の道のために、さらに見て、約このSOの答えは見つかったので、ルータのV4に反応してスクロール復元を処理する方法を ...万一、私はそれが前提となりますルータV5に反応して動作しますか？更新：v5では私には機能しないようです。私はいくつかの構成を試しました。また、React Router v4で完全に機能させることもできませんでした。新しいページの一番上までスクロールしていたので、少なくとも生きていることはわかっていましたが、履歴の復元は行われません。

また、react-router-scroll-memoryも機能しましたが、タブやカルーセルに必要なものなど、指定されたルートでのスクロールを無効にするオプションはありません。

私はoaf-react-routerの使用を検討しましたが、特定のルートのスクロール復元またはトップへのスクロールの無効化に関するドキュメントには何も記載されていません。編集：私の回答で概説されているように、実際にこれを処理します。

見落としていることはありますか？この機能を必要とするのは私だけではないため、この問題に対処するための標準は何ですか。エッジの効いた、実験的なことをしているようですが、通常のサイトと同じようにスクロールする必要があります。

これを行う1つの方法は、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ルーターv4およびv5で動作し、多くのSPAルーターが対応していないアクセシビリティを処理するため、現時点で最も完全なソリューションである可能性があります。

不思議なことに、このドキュメントではこの機能について詳しく説明していません。

他の誰かが機能し、より標準的なものと見なされるソリューションを持っている場合は、ここで回答を提供してください。選択した回答を変更することを検討します。