web-dev-qa-db-de.com

Nach oben scrollen, wenn Sie den Switch verwenden

Wenn Sie von einer Seite zu einer anderen navigieren, möchte ich, dass der Benutzer automatisch nach oben verschoben wird, d. H. scrollTo(0, 0).

Gemäß react-routerdocs zur Bildlaufwiederherstellung wird empfohlen, eine Komponente ScrollToTopeinzurichten und Ihre Routen darin einzuhüllen.

Während dies gut funktioniert und der Benutzer für jede in der Komponente ScrollToTopverschachtelte Route nach oben gescrollt wird, funktioniert die Switchnicht mehr wie ein Switch, wenn die Komponente innerhalb einer Switchname__-Komponente platziert ist. Das bedeutet, dass alle Routen gerendert werden, die der ersten entspricht.

Wenn Sie stattdessen ScrollToTopaußerhalb von Switchplatzieren, wird der Benutzer nicht mehr nach oben gerollt.

Version: react-router-v4

8
Kevin Farrugia

Ich bin nicht sicher, was das Scrollen angeht, aber Sie können einen Listener an browserHistory anhängen. Dies kann eine einfache Methode sein (ich glaube nicht, dass onUpdate mit v4 funktioniert):

const browserHistory = createBrowserHistory();

browserHistory.listen((location, action) => {
  window.scrollTo(0, 0);
});

<Router history={browserHistory} />
8
Austin Greco

Ich konnte dieses Problem mit der react-router-v4 scroll Restoration lösen und das ScrollToTop außerhalb der Switch platzieren. Denken Sie auch daran, withRouter zu verwenden, sonst funktioniert es nicht.

2
Kevin Farrugia

Ich hatte das gleiche Problem wie ich. Wenn das Update aktualisiert wird, führt es den Benutzer zur scrollTo(0,0) 

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router

Wenn oben nicht funktioniert: 

In Reaktiver-Router-V4 Scroll Restoration

Dies ist mit einer Komponente, die das Fenster bei jeder Navigation nach oben scrollen soll, unkompliziert. Stellen Sie sicher, dass Sie es mitRouter einpacken, um Zugriff auf die Requisiten des Routers zu erhalten:

 componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

Dann rendern Sie es oben in Ihrer App, aber unter Router

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

Der obige Code wurde von React-Router kopiert Web-Guides

1
Aaqib