Как перейти к определенному div на той же странице в ReactJS?

Question

Мне нужно перейти к определенному div на той же странице в приложении React JS. Например, как это делается на следующем веб-сайте. Когда вы нажимаете , пользовательский интерфейс прокручивается и фокусируется на конкретном div и аналогично для других ссылок на этом веб-сайте. https://reacttraining.com/react-router/web/api/NavLink/strict-bool

Answer 1

Получите смещение целевого элемента и используйте window.scrollTo, чтобы расположить его либо в верхней части страницы, либо там, где вам нужно. Это будет работать в браузерах Chrome / последней версии. Возможно, вы захотите проверить совместимость других браузеров.

let offsetTop  = document.getElementById("yourelement").offsetTop;
window.scrollTo({
    top: offsetTop-100, 
    behavior: "smooth"
});

Программа в коде https://codepen.io/Divine1/pen/zbQVwR

Обновление

Я добавил эту логику в онлайн-редактор проектов реагировать, и она работает. Вы можете увидеть, как работает этот код https://repl.it/@Divine1/QuietHeartyApplicationstack

Проверьте App.js App.css и текущий результат.