Как перейти к определенному элементу div по нажатию кнопки в одностраничном приложении с помощью activ-router?

Question

У меня в заголовке две кнопки («Домой», «Свяжитесь с нами»), а в «div» на той же странице есть содержимое «Домой и с нами», а при нажатии кнопки «Домой» или «Контакт» следует прокрутить до этой конкретной страницы.div используя React-Router Поскольку я новичок в этих концепциях, я не могу найти правильное решение.

Answer 1

Почему вы хотите React-Router для этого?

Разве вы не можете напрямую обернуть кнопки в тег <a> и предоставить атрибут href для тега <a> с разделом id, в котором вы хотите прокрутить.

, например

<a href="#home"><button>Home</button></a>

Где-то в вашем компоненте,

<div id="home">
...
</div>

Для эффекта плавной прокрутки вы можете добавить эту CSS

html{scroll-behavior:smooth}

Обновлено

На основе комментариев вы можете использовать react-router-hash-link.

yarn add react-router-hash-link
or
npm install --save react-router-hash-link

// В YourComponent.js

...
import { HashLink as Link } from 'react-router-hash-link';
...

// Используйте его как RRv4 (чтобы быть строкой или объектом, смотрите API RRv4 для деталей):

<Link to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>