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:
import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';
class ScrollToTopRoute extends Component {
componentDidUpdate(prevProps) {
if (this.props.path === this.props.location.pathname && this.props.location.pathname !== prevProps.location.pathname) {
window.scrollTo(0, 0)
}
}
render() {
const { component: Component, ...rest } = this.props;
return <Route {...rest} render={props => (<Component {...props} />)} />;
}
}
export default withRouter(ScrollToTopRoute);
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:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Lorem from 'react-lorem-component';
import ScrollToTopRoute from './ScrollToTopRoute';
import './App.css';
const Home = () => (
<div className="App-page">
<h2>Home</h2>
<Lorem count={12} seed={12} />
</div>
);
const About = () => (
<div className="App-page">
<h2>About</h2>
<Lorem count={30} seed={4} />
</div>
);
const AnotherPage = () => (
<div className="App-page">
<h2>This is just Another Page</h2>
<Lorem count={12} seed={45} />
</div>
);
class App extends Component {
render() {
return (
<Router>
<div className="App">
<div className="App-header">
<ul className="App-nav">
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/another-page">Another Page</Link></li>
</ul>
</div>
<Route exact path="/" component={Home} />
<ScrollToTopRoute path="/about" component={About} />
<ScrollToTopRoute path="/another-page" component={AnotherPage} />
</div>
</Router>
);
}
}
export default App;
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
componentDidMount
der neuen Routenkomponente nicht ausführen?