React-router-dom Ссылка открыта вверху страницы

Question

Так что я чувствую себя довольно глупо, чтобы спросить это, но не могу найти прямой ответ на него.

Нужно ли давать какой-либо параметр css или непосредственно <Link> для того, чтобы страницы на моем отреагировать приложение открыто вверху?

РЕДАКТИРОВАТЬ Поэтому, воздерживаясь, каждый раз, когда я нажимаю на элемент <Link> в моем проекте reactJs, ссылка открывает страницу в середине экрана, а не вверху.

Например. У меня есть этот компонент

 <li ><Link to={{pathname: "/product", state: {products}}}><i className="fa fa-search"></i></Link></li>

, и когда я нажимаю на него, он открывает новую страницу / компонент, но не в верхней части страницы. Пользователь должен прокрутить вверх, чтобы увидеть верх, и я хотел бы открыть новые страницы прямо вверху!

Answer 1

Это можно сделать без установки каких-либо дополнительных библиотек. Вы можете проверить официальный пример react-router для восстановления прокрутки здесь .

Answer 2

создайте функцию scrollToTop и используйте ее в теге ссылки

const scrollToTop = () => {
    window.scrollTo(0, 0)
}

когда пользователь нажимает на любую ссылку, наша функция заставляет нашу страницу прокручиваться вверх.

 <li   onClick={scrollToTop} ><Link to={{pathname: "/product", state: {products}}}><i className="fa fa-search"></i></Link></li>

Answer 3

Вы можете использовать библиотеку реагировать-прокручивать и обнаруживать, когда меняется путь к местоположению, прокручивая к началу, как это

import { animateScroll } from 'react-scroll';

useEffect(() => {
    animateScroll.scrollToTop({
      duration: 0
    });
}, [location.pathname]);