У меня есть две кнопки («Домой», «Свяжитесь с нами») в моем заголовке, и у меня есть содержимое «Домой и свяжитесь с нами» в div на той же странице, пока я нажимаю кнопку «Домой» или «Связаться с нами», он должен прокручиваться до этого конкретного div с помощью < strong>React-Router Поскольку я новичок в этих концепциях, я не могу найти правильного решения.
Как перейти к конкретному div при нажатии кнопки в одностраничном приложении с помощью реактивного маршрутизатора?
Ответы (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>
person
ravibagul91
schedule
24.06.2019
На самом деле это мое требование, сэр, я использую reactjs для просмотра, и у меня есть две кнопки, а именно контакт и информация, пока я нажимаю на эти кнопки, он должен прокручиваться до этого конкретного div, и URL-адрес также должен измениться.
- person SJ Purusothaman; 24.06.2019
