Требуется прокрутка, чтобы быть вверху при загрузке новой страницы - React - PullRequest
Новая
       3

Требуется прокрутка, чтобы быть вверху при загрузке новой страницы - React

0 голосов
/ 16 июня 2020

У меня многостраничное приложение. Мне нужно реализовать автоматическую прокрутку вверх, когда я перехожу на новую страницу. Я пробовал следующее:

ScrollToTop. js это находится внутри папки компонента 

import React, { Component } from 'react';
import { withRouter } from 'react-router';

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

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

export default withRouter(ScrollToTop)

и App. js

import {Router} from 'react-router-dom'
import ScrollToTop from './common/components/ScrollToTop'
const Appnew = () => (
  <Router>
    <ScrollToTop>
      <Appnew/>
    </ScrollToTop>
  </Router>
)
const App = (props) => {
{Appnew()}
}

Это не работает. Есть предложения?

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

Нет ничего плохого в твоей c. Предполагая, что ваш Appnew имеет компоненты, инкапсулированные с Route, он должен работать.

Просто использовал ваш ho c и подготовил демонстрацию , которая работает нормально. Взгляните.

0 голосов
/ 16 июня 2020

Вы должны попытаться изменить это 

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

на 

componentDidMount() {
      window.scroll({
        top: 0,
        left: 0
     });
 }

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

Также вы можете использовать событие ниже, которое прослушивает DOM, и когда он загружается, делайте все, что хотите 

window.addEventListener('DOMContentLoaded', (event) => {
    // Your code
});
...