#reactjs #react-router #react-router-dom
Вопрос:
Страница должна прокручиваться вверх только в том случае, если она расположена.путь изменен, React.memo должен возвращать значение true только в том случае, если путь изменен, а не параметры запроса. Но страница прокручивается вверх, даже если обновление возвращает значение false.
const shouldUpdate = (prevProps, nextProps) => {
return prevProps.location.pathname !== nextProps.location.pathname;
};
const ScrollToTop = ({ history }) => {
useLayoutEffect(() => {
const unlisten = history.listen(() => {
window.scrollTo(0, 0);
});
return () => {
unlisten();
};
}, []);
return (null);
};
export default withRouter(React.memo(ScrollToTop, shouldUpdate));
<React.Fragment>
<Router>
<ScrollToTop />
<Switch>
.
.
.
</Switch>
</Router>
</React.Fragment>
Комментарии:
1. Поможет ли это? reactrouter.com/web/guides/scroll-restoration
2. Это самое первое решение, которое я попробовал.
Ответ №1:
Вы должны вызвать scrollTo
метод с помощью useEffect
крючка
useEffect(() => {
document.querySelector("#root").scrollTo(0, 0);
}, []);