javascript — прокрутка реагирующего маршрутизатора для перехода при каждом переходе

реакция-роутер прокрутка вверх при каждом переходе

Для реакции-маршрутизатора v4 , вот создание-реагировать-приложение, которое выполняет восстановление прокрутки: http://router-scroll-top.surge.sh/ .

Для этого вы можете создать декорацию компонента Route и использовать методы жизненного цикла:

 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 {amp}amp;{amp}amp; this.props.location.pathname !== prevProps.location.pathname) { window.scrollTo(0, 0) } } render() { const { component: Component, ...rest } = this.props; return {amp}lt;Route {...rest} render={props ={amp}gt; ({amp}lt;Component {...props} /{amp}gt;)} /{amp}gt;; } } export default withRouter(ScrollToTopRoute); 

На componentDidUpdate мы можем проверить, когда имя пути местоположения изменяется и сопоставить его с path и, если они удовлетворены, восстановить прокрутку окна.

Что хорошо в этом подходе, так это то, что у нас могут быть маршруты, восстанавливающие прокрутку, и маршруты, которые не восстанавливают прокрутку.

Вот пример App.js о том, как вы можете использовать выше:

 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 = () ={amp}gt; ( {amp}lt;div className="App-page"{amp}gt; {amp}lt;h2{amp}gt;Home{amp}lt;/h2{amp}gt; {amp}lt;Lorem count={12} seed={12} /{amp}gt; {amp}lt;/div{amp}gt; ); const About = () ={amp}gt; ( {amp}lt;div className="App-page"{amp}gt; {amp}lt;h2{amp}gt;About{amp}lt;/h2{amp}gt; {amp}lt;Lorem count={30} seed={4} /{amp}gt; {amp}lt;/div{amp}gt; ); const AnotherPage = () ={amp}gt; ( {amp}lt;div className="App-page"{amp}gt; {amp}lt;h2{amp}gt;This is just Another Page{amp}lt;/h2{amp}gt; {amp}lt;Lorem count={12} seed={45} /{amp}gt; {amp}lt;/div{amp}gt; ); class App extends Component { render() { return ( {amp}lt;Router{amp}gt; {amp}lt;div className="App"{amp}gt; {amp}lt;div className="App-header"{amp}gt; {amp}lt;ul className="App-nav"{amp}gt; {amp}lt;li{amp}gt;{amp}lt;Link to="/"{amp}gt;Home{amp}lt;/Link{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;Link to="/about"{amp}gt;About{amp}lt;/Link{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;Link to="/another-page"{amp}gt;Another Page{amp}lt;/Link{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;Route exact path="/" component={Home} /{amp}gt; {amp}lt;ScrollToTopRoute path="/about" component={About} /{amp}gt; {amp}lt;ScrollToTopRoute path="/another-page" component={AnotherPage} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Router{amp}gt; ); } } export default App; 

Из приведенного выше кода интересно отметить, что только при переходе к /about или /another-page действие прокрутки вверх. Однако при включении / прокрутке восстановление не произойдет.

Вся кодовая база может быть найдена здесь: https://github.com/rizedr/react-router-scroll-top

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector