Условно отключить прокрутку вверх на дом поменять реагировать роутер

Question

Я реализовал компонент ScrollToTop внутри моего Browser Router, поэтому позиция прокрутки равна (0,0) при каждом новом изменении dom.

т.е.) / explore> / about будет прокручиваться вверх.

Однако на странице исследования у меня есть подменю в виде вкладок (Home, Items, Budget), которое управляет маршрутизатором для прокрутки. наверх, когда это не должно быть. На вкладке «Главная» выбран путь по умолчанию «Исследовать», в то время как «Предметы и бюджет» являются вложенными маршрутами в «Исследовании».

т.е. Я пытался использовать условия в моем компоненте ScrollToTop, но не смог. Я посмотрел руководство по прокрутке восстановления обучения маршрутизатора React, но не смог. Кто-нибудь знает, как условно отключить прокрутку наверх для определенных путей или местоположений?

Вот мой ScrollToTop:

const ScrollToTop = (props) => {

  useEffect(() => {
    if (props.history.action === 'POP') {
        return;
    }

    let hash = props.location.hash;
    if (hash) {
      let element = document.querySelector(hash);
      if (element) {
        element.scrollIntoView({block: 'start', behavior: 'smooth'});
      }
    } else {
      window.scrollTo(0, 0);
    }    
  });
};

Answer 1

Я не совсем знаю, что вы уже пробовали, но, основываясь на вашем фрагменте кода, я собрал эту быструю песочницу, показывающую, как ее заблокировать: https://codesandbox.io/s/recursing-river-3bjf5

Вы можно увидеть, что если вы прокрутите страницу и нажмете ссылку thisthat, она не перейдет к началу страницы, а перейдет к другим ссылкам.

Я полагаю, что ключевым моментом является то, что мы визуализируем компонент, передав его в Route, поэтому он напрямую получает все реквизиты маршрутизатора <Route component={ScrollToTop} /> (вы можете использовать декоратор withRouter или что-то еще, но все они достигают одной и той же цели)

Затем у него просто есть список путей вроде const dontScrollIntoViewOnPaths = ["/this/that"];

Мы извлекаем самое последнее имя пути из местоположения let { hash, pathname } = location;

И затем мы просто не выполняем код, если только путь не находится в этом списке

 else if (!dontScrollIntoViewOnPaths.includes(pathname)) {
      window.scrollTo(0, 0);
 }

Это полезно?