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-router
docs 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
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} />
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.
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