59
задан 18 December 2017 в 06:15

5 ответов

render() {
    window.scrollTo(0, 0)
    ...
}

Может быть простое решение в случае, если опоры не изменяются и componentDidUpdate () не увольнение.

0
ответ дан 1 November 2019 в 11:17

Для малых приложений, с 1-4 маршрутами, Вы могли попытаться взломать его с перенаправлением к главному элементу DOM с #id вместо этого просто маршрут. Затем нет никакой потребности перенести Маршруты в ScrollToTop или методы жизненного цикла использования.

0
ответ дан 1 November 2019 в 11:17

Я хочу совместно использовать свое решение для тех, кто использует react-router-dom v5, так как ни одно из этих v4 решений не сделало работу для меня.

то, Что решило мою проблему, устанавливало react-router-scroll-top и помещало обертку в <App /> как это:

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

и вот именно! это работало!

1
ответ дан 1 November 2019 в 11:17

В компоненте ниже <Router>

Просто добавляют Реагировать Рычаг (в случае, если Вы не используете Реагировать класс)

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [props.location]);
1
ответ дан 1 November 2019 в 11:17

, но классы так 2018

, реализация ScrollToTop с Реагирует Рычаги

использование ScrollToTop.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

:

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>
<час>

ScrollToTop может также быть реализован как компонент обертки:

использование ScrollToTop.js

import React, { useEffect, Fragment } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history, children }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return <Fragment>{children}</Fragment>;
}

export default withRouter(ScrollToTop);

:

<Router>
  <ScrollToTop>
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </ScrollToTop>
</Router>
27
ответ дан 1 November 2019 в 11:17

Другие вопросы по тегам:

Похожие вопросы: