render() {
window.scrollTo(0, 0)
...
}
Может быть простое решение в случае, если опоры не изменяются и componentDidUpdate () не увольнение.
Для малых приложений, с 1-4 маршрутами, Вы могли попытаться взломать его с перенаправлением к главному элементу DOM с #id вместо этого просто маршрут. Затем нет никакой потребности перенести Маршруты в ScrollToTop или методы жизненного цикла использования.
Я хочу совместно использовать свое решение для тех, кто использует react-router-dom v5
, так как ни одно из этих v4 решений не сделало работу для меня.
то, Что решило мою проблему, устанавливало react-router-scroll-top и помещало обертку в <App />
как это:
const App = () => (
<Router>
<ScrollToTop>
<App/>
</ScrollToTop>
</Router>
)
и вот именно! это работало!
В компоненте ниже <Router>
Просто добавляют Реагировать Рычаг (в случае, если Вы не используете Реагировать класс)
React.useEffect(() => {
window.scrollTo(0, 0);
}, [props.location]);
, но классы так 2018
использование 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>