Implementieren der Bildlaufwiederherstellung für React Router SPA

Ich erstelle eine einseitige React-Anwendung und habe festgestellt, dass die Bildlaufwiederherstellung in Chrome (und möglicherweise in anderen Browsern) nicht wie erwartet funktioniert.

Auf dem React-Router-Dom-Github-Repo gibt es eine Seite, auf der angegeben ist, dass Browser das Scrollen für Apps mit nur einer Seite nativ verarbeiten , und das Verhalten ähnelt dem einer herkömmlichen Nicht-SPA-Webseite, wenn diese Option aktiviert history.scrollRestorationist auto.

Das Verhalten, das ich brauche, ist auf dieser Seite angegeben:

1. Scrollen Sie in der Navigation nach oben, damit Sie keinen neuen Bildschirm starten, der nach unten gescrollt wird.
2. Wiederherstellen der Bildlaufpositionen des Fensters und der Überlaufelemente bei "Zurück" - und "Vorwärts" -Klicks (aber nicht bei Link-Klicks!)

Ich muss aber auch das Verhalten für Routen deaktivieren, die Registerkarten oder ein Karussell enthalten.

Hier ist ein Link zu den Chrome-Spezifikationen zu diesem Problem .

Was ich in Chrome Version 78.0.3904.97 (Official Build) (64-Bit) für OS X beobachte, scheint das zu sein, was ich von der history.scrollRestoration manualEinstellung erwarten würde . Das heißt, wenn ich auf einer Seite einen halben Bildlauf durchführe und auf einen Link klicke , wird die nächste Seite auf der Hälfte der Seite bis zum gleichen Punkt wie auf der vorherigen Seite gescrollt.

Ich habe das history.scrollRestorationan verschiedenen Stellen überprüft und festgestellt, dass es startet und bleibt auto, die Standardeinstellung,

Ein wichtiger Punkt hierbei ist die Antwort von @ TrevorRobinson: "Die automatischen Versuche des Browsers zur Bildlaufwiederherstellung ... ... funktionieren meistens nicht für einseitige Apps ..." Ok ... Ich fand konsequente Unterstützung für history.scrollRestoration, aber Anscheinend sind Browser beschissen, die Scroll-Wiederherstellung tatsächlich durchzuführen. Dann sollte das hier vermerkt werden , was mir heute Zeit gespart hätte.

Dann suche ich nach Möglichkeiten, dies manuell zu tun, und bin mir nicht sicher, wie es weitergehen soll. react-router-scrollsagt, dass es nicht mit React Router v4 kompatibel ist, erwähnt aber nicht v5, das ab dieser Frage aktuell ist. Sollte ich also davon ausgehen, dass v5 auch nicht kompatibel ist?

Also ich sich auf eine Art und Weise weiter suchen, und fand diese SO Antwort über , wie Scroll - Wiederherstellung zu handhaben mit Router v4 Reagieren ... soll ich davon aus, dass wird mit React Router v5 arbeiten? Update: Es scheint in Version 5 nicht für mich zu funktionieren. Ich habe verschiedene Konfigurationen ausprobiert. Ich konnte es auch nicht vollständig mit React Router v4 zum Laufen bringen. Ich wusste, dass es zumindest lebendig wurde, da es auf einer neuen Seite nach oben rollt, aber eine Wiederherstellung in der Geschichte findet nicht statt.

Ich habe auch den React-Router-Scroll-Speicher zum Laufen gebracht, aber es gibt keine Optionen zum Deaktivieren des Scrollens auf bestimmten Routen, z. B. was für Tabs oder ein Karussell benötigt wird ... Ich könnte es einfach hacken, damit es funktioniert.

Ich habe überlegt, einen Oaf-React-Router zu verwenden , aber in der Dokumentation wird nichts über das Deaktivieren der Bildlaufwiederherstellung oder des Bildlaufs nach oben für bestimmte Routen gesagt. Bearbeiten: Es behandelt tatsächlich, wie in meiner Antwort beschrieben.

Gibt es etwas, das ich übersehen habe? Was ist der Standard für den Umgang mit diesem Problem, da ich nicht der einzige sein kann, der diese Funktion benötigt. Es scheint, als würde ich etwas nervöses und experimentelles machen, aber ich brauche nur meine Site, um wie eine normale Site zu scrollen.

Eine Möglichkeit, dies zu tun, ist mit oaf-react-router . Verwenden Sie die shouldHandleActionOptionen in den Einstellungen. Die Funktion wird übergeben previousLocationund nextLocationSie können damit bestimmen, ob der Bildlauf zurückgesetzt / wiederhergestellt werden soll, und falsewenn nicht, zurückkehren.

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 funktioniert mit React Router v4 und v5 und übernimmt die Barrierefreiheit, wo dies bei vielen SPA-Routern nicht der Fall ist. Daher ist es derzeit möglicherweise die vollständigste Lösung.

Seltsamerweise wird in der Dokumentation auf diese Funktion nicht näher eingegangen.

Wenn jemand eine Lösung hat, die funktioniert und eher als Standard betrachtet wird, geben Sie hier bitte eine Antwort an, und ich werde in Betracht ziehen, die ausgewählte Antwort zu ändern.