Ich habe ein Problem beim Navigieren auf eine andere Seite. Die Position bleibt wie auf der vorherigen Seite. Es wird also nicht automatisch nach oben gescrollt. Ich habe auch versucht, window.scrollTo(0, 0)
auf onChange Router zu verwenden. Ich habe auch scrollBehavior verwendet, um dieses Problem zu beheben, aber es hat nicht funktioniert. Irgendwelche Vorschläge dazu?
javascript
reactjs
react-router
react-router-redux
Adrian Hartanto
quelle
quelle
componentDidMount
der neuen Routenkomponente nicht ausführen?document.body.scrollTop = 0;
in diecomponentDidMount
von der Komponente , die Sie bewegenAntworten:
Die Dokumentation zu React Router v4 enthält Codebeispiele für die Bildlaufwiederherstellung. Hier ist ihr erstes Codebeispiel, das als Site-weite Lösung für das Scrollen nach oben dient, wenn eine Seite navigiert wird zu:
Rendern Sie es dann oben in Ihrer App, aber unterhalb des Routers:
^ direkt aus der Dokumentation kopiert
Natürlich funktioniert dies in den meisten Fällen, aber es gibt mehr Informationen zum Umgang mit Schnittstellen mit Registerkarten und warum keine generische Lösung implementiert wurde.
quelle
Because browsers are starting to handle the “default case” and apps have varying scrolling needs (like this website!), we don’t ship with default scroll management. This guide should help you implement whatever scrolling needs you have.
macht mich traurig, da alle Optionen, für die sie Codebeispiele geben, tatsächlich über Eigenschafteneinstellungen in das Steuerelement eingebrannt werden könnten, wobei einige Konventionen zum Standardverhalten dann geändert werden können. Das fühlt sich super hacky und unvollendet an, imho. Bedeutet, dass nur fortgeschrittene Reaktionsentwickler das Routing ordnungsgemäß ausführen können und kein #pitOfSuccesswork-arounds
hier ignoriert haben. +100 für @danielnixonaber Klassen sind so 2018
ScrollToTop-Implementierung mit React Hooks
ScrollToTop.js
Verwendung:
ScrollToTop kann auch als Wrapper-Komponente implementiert werden:
ScrollToTop.js
Verwendung:
quelle
scrollToTop
zu<Route>
. Es scheint eine sehr häufig verwendete Funktion zu sein.Diese Antwort gilt für Legacy-Code, für Router v4 + überprüfen Sie andere Antworten
Wenn es nicht funktioniert, sollten Sie den Grund finden. Auch drinnen
componentDidMount
Du könntest benutzen:
Sie könnten ein Flag wie "scrolled = false" hinzufügen und dann im Update:
quelle
window.scrollTo(0,0);
onUpdate
Hook ist inonUpdate
Haken?Für den React-Router v4 gibt es hier eine App zum Erstellen und Reagieren, mit der die Bildlaufwiederherstellung durchgeführt wird: http://router-scroll-top.surge.sh/ .
Um dies zu erreichen, können Sie die
Route
Komponente dekorieren und die Lebenszyklusmethoden nutzen:Auf dem können
componentDidUpdate
wir überprüfen, wann sich der Pfadname des Standorts ändert, und ihn mit dem übereinstimmenpath
Requisite abgleichen und, wenn diese zufrieden sind, den Fensterlauf wiederherstellen.Das Coole an diesem Ansatz ist, dass wir Routen haben können, die den Bildlauf wiederherstellen, und Routen, die den Bildlauf nicht wiederherstellen.
Hier ist ein
App.js
Beispiel, wie Sie das oben genannte verwenden können:Aus dem obigen Code ist es interessant hervorzuheben, dass nur beim Navigieren zu
/about
oder/another-page
beim Scrollen nach oben eine Aktion ausgeführt wird. Aber wenn es weitergeht/
fortfahren, wird jedoch keine Bildlaufwiederherstellung durchgeführt.Die gesamte Codebasis finden Sie hier: https://github.com/rizedr/react-router-scroll-top
quelle
Home
.Home
Scrollen Sie jetzt zum Ende von und gehen Sie zu 'AnotherPage' und scrollen Sie nicht. Wenn Sie jetzt noch einmal zu kommenHome
, wird diese Seite nach oben gescrollt. Entsprechend Ihrer Antwort sollte diehome
Seite jedoch weiter gescrollt werden.Es ist bemerkenswert, dass die
onUpdate={() => window.scrollTo(0, 0)}
Methode veraltet ist.Hier ist eine einfache Lösung für React-Router 4+.
quelle
#
und?
am Ende unserer URL hinzufügen . Im ersten Fall sollten Sie nicht nach oben scrollen, im zweiten Fall sollten Sie überhaupt nicht scrollenWenn Sie React 16.8+ ausführen, ist dies mit einer Komponente einfach zu handhaben, die das Fenster bei jeder Navigation
nach oben scrollt : Hier befindet sich die Komponente scrollToTop.js
Dann rendern Sie es oben in Ihrer App, aber unter Router.
Hier ist in app.js
oder in index.js
quelle
Ich hatte das gleiche Problem mit meiner Anwendung. Mithilfe des folgenden Codeausschnitts konnte ich beim Klicken auf die nächste Schaltfläche zum Anfang der Seite scrollen.
Das Problem bestand jedoch weiterhin im Browser. Nach vielen Versuchen wurde mir klar, dass dies am Verlaufsobjekt des Browserfensters lag, das eine Eigenschaft scrollRestoration hat, die auf auto gesetzt wurde. Das Setzen auf manuell löste mein Problem.
quelle
In einer Komponente unten
<Router>
Fügen Sie einfach einen React Hook hinzu (falls Sie keine React-Klasse verwenden)
quelle
Ich möchte meine Lösung für diejenigen freigeben, die sie verwenden,
react-router-dom v5
da keine dieser v4-Lösungen die Arbeit für mich erledigt hat.Was mein Problem löste, war die Installation von React-Router-Scroll-Top und das Einfügen des Wrappers
<App />
wie folgt:und das ist es! es funktionierte!
quelle
Hooks sind zusammensetzbar und seit React Router v5.1 haben wir einen
useHistory()
Hook. Basierend auf der Antwort von @ zurfyx habe ich einen wiederverwendbaren Hook für diese Funktionalität erstellt:quelle
Ein React Hook, den Sie Ihrer Route-Komponente hinzufügen können. Verwenden
useLayoutEffect
anstelle von benutzerdefinierten Listenern.Update : Aktualisiert, um
useLayoutEffect
anstelle von zu verwendenuseEffect
, für weniger visuellen Ruck. Dies bedeutet ungefähr:useEffect
: Komponenten rendern -> auf Bildschirm malen -> nach oben scrollen (Effekt ausführen)useLayoutEffect
: Komponenten rendern -> nach oben scrollen (Effekt ausführen) -> auf Bildschirm malenJe nachdem, ob Sie Daten laden (denken Sie an Spinner) oder ob Sie Seitenübergangsanimationen haben,
useEffect
funktioniert dies möglicherweise besser für Sie.quelle
Ich habe eine Komponente höherer Ordnung namens geschrieben
withScrollToTop
. Dieses HOC nimmt zwei Flags auf:onComponentWillMount
- Ob bei der Navigation nach oben gescrollt werden soll (componentWillMount
)onComponentDidUpdate
- Gibt an, ob beim Update (componentDidUpdate
) nach oben gescrollt werden soll . Dieses Flag ist in Fällen erforderlich, in denen die Komponente nicht abgemeldet ist, aber ein Navigationsereignis auftritt, z. B. von/users/1
bis/users/2
.Um es zu benutzen:
quelle
Meine Lösung: Eine Komponente, die ich in meinen Bildschirmkomponenten verwende (wo ich einen Bildlauf nach oben möchte).
Dadurch bleibt die Bildlaufposition beim Zurückgehen erhalten. Die Verwendung von useEffect () war für mich fehlerhaft, wenn das Dokument beim Zurückgehen nach oben gescrollt wurde, und hatte auch einen Blinkeffekt, wenn die Route in einem bereits gescrollten Dokument geändert wurde.
quelle
Reagiere Haken 2020 :)
quelle
const ScrollToTop: React.FC = () => {
Ich verstehe nicht, wasScrollToTop: React.FC
bedeutetHier ist eine andere Methode.
Für den React-Router v4 können Sie einen Listener auch auf folgende Weise an Änderungen im Verlaufsereignis binden:
Die Bildlaufebene wird ohne
setImmediate()
auch auf 0 gesetzt, wenn die Route durch Klicken auf einen Link geändert wird. Wenn der Benutzer jedoch die Zurück-Taste im Browser drückt, funktioniert dies nicht, da der Browser die Bildlaufebene manuell auf die vorherige Ebene zurücksetzt, wenn die Zurück-Taste gedrückt wird Wenn Sie also verwendensetImmediate()
, wird unsere Funktion ausgeführt, nachdem der Browser die Bildlaufebene zurückgesetzt hat, wodurch wir den gewünschten Effekt erzielen.quelle
Mit React Router Dom v4 können Sie verwenden
Erstellen Sie eine scrollToTopComponent-Komponente wie die folgende
oder wenn Sie Registerkarten verwenden, verwenden Sie die folgende
Ich hoffe, dies hilft für mehr über die Wiederherstellung von Bildlauf. Dort gibt es Dokumente, die auf die Wiederherstellung des Bildlaufs reagieren
quelle
Ich habe festgestellt, dass
ReactDOM.findDomNode(this).scrollIntoView()
das funktioniert. Ich habe es hineingelegtcomponentDidMount()
.quelle
Bei kleineren Apps mit 1 bis 4 Routen können Sie versuchen, sie mit der Umleitung zum obersten DOM-Element mit #id und nur einer Route zu hacken. Dann ist es nicht erforderlich, Routen in ScrollToTop zu verpacken oder Lebenszyklusmethoden zu verwenden.
quelle
Kann eine einfache Lösung sein, wenn die Requisiten nicht geändert werden und componentDidUpdate () nicht ausgelöst wird.
quelle
Fügen Sie in Ihrem
router.js
einfach diese Funktion in dasrouter
Objekt ein. Dies wird den Job machen.So was,
**Routes.js**
quelle
Das ist hacky (funktioniert aber): Ich füge nur hinzu
window.scrollTo (0,0);
rendern ();
quelle