web-dev-qa-db-fra.com

Faites défiler vers le haut lorsque vous utilisez Switch (react-router)

Lorsque je navigue d’une page à une autre, je souhaite que l’utilisateur soit automatiquement fait défiler vers le haut, c.-à-d. scrollTo(0, 0).

Selon le react-routerdocs sur la restauration de défilement , l’approche recommandée consiste à configurer un composant ScrollToTop et à envelopper vos itinéraires dans celui-ci.

Bien que cela fonctionne bien et que l'utilisateur défile jusqu'en haut pour toute route imbriquée dans le composant ScrollToTop, si le composant est placé dans un composant Switch, la Switch ne fonctionne plus comme un commutateur; ce qui signifie qu'il rendra tous les itinéraires auxquels il correspond au lieu du premier.

Sinon, en plaçant la ScrollToTop en dehors de la Switch, elle ne fait plus défiler l'utilisateur vers le haut.

Version: react-router-v4

javascriptreactjsreact-routerreact-router-v4
8
Kevin Farrugia

Je ne suis pas certain du défilement, mais vous pouvez associer un auditeur à browserHistory, ce qui peut être un moyen facile de le faire (je ne pense pas que onUpdate fonctionne avec v4):

const browserHistory = createBrowserHistory();

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

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

J'ai réussi à résoudre ce problème en utilisant le react-router-v4 scroll Restauration et en plaçant le ScrollToTop en dehors de la Switch. Pensez également à utiliser withRouter sinon cela ne fonctionnera pas.

2
Kevin Farrugia

J'ai eu le même problème que ce que j'ai fait était Chaque fois que le est mis à jour, il mènera l'utilisateur à la scrollTo(0,0) 

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

Si ci-dessus ne fonctionne pas: 

Dans react-router-v4 faites défiler Restauration

C’est simple à manipuler avec un composant qui fera défiler la fenêtre vers le haut à chaque navigation, assurez-vous de l’emballer avecRouter pour lui donner accès aux accessoires du routeur:

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

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

Rendez-le ensuite en haut de votre application, mais sous Router.

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

Le code ci-dessus est copié à partir de React-Router guides web

1
Aaqib