Скролл к якорю после загрузки страницы ReactApp

Question

Вопрос наверно более теоретический. Есть приложение на React Hooks я хочу чтоб после перехода на страницу "список товаров" с хешом в url (#itemId=621) У меня происходил скрол к этому товару в списке.

Изначально мне показалась задача абсолютно элементарной

в useEffect получаю хеш с помощью. (ueryString.parse(history.location.hash))
каждому товару map докидываю id id={itemId=${item.id} супер hash = item.id
Получаю ноду по хешу скрол...

так не работает....Начал разбираться, Гугл выдает кучу вариантов для с ref без ref. Куча либ для этого... Какой способ актуальный в 21 году? В какую сторону стоит копать?

Ps: Сорри за наивный вопрос, реакт для меня нов . А все примеры в сети как правило описывают элементарнеший пример. Кликнул по ссылку отскролился))

Answer 1

const itemNodes = useRef({});

useEffect(() => {
  const target = queryString.parse(history.location.hash);

  if (itemNodes.hasOwnProperty(target)) {
    const rects = itemNodes[target].getBoundingClientRect();
    window.scrollTo(0, rects.top);
  }
}, []);

// ...
items.map((item) => {
  const onRef = (node) => {
    itemNodes[item.id] = node;
  };
  return (
    <div className="my-item" ref={onRef}>Item</div>
  );
});

БЛОГ НА HUSL

Скролл к якорю после загрузки страницы ReactApp

Ответы (1 шт):