Если вы знакомы с ReactJS, то, должно быть, слышали о библиотеке маршрутизации, которую они с любовью называют «response-router-dom». Это потрясающая библиотека, которую очень легко установить и внедрить в ваше приложение - с незначительной неудачей, которая иногда остается незамеченной, если вы создаете только одностраничное приложение - для чего я имею в виду, что ваше приложение представляет собой буквально одну страницу - без прокрутки.
Если у вас есть много контента на вашем веб-сайте, который требует прокрутки, а затем переключитесь на другую страницу с еще большим количеством прокручиваемого контента, вы заметите проблему с текущей версией response-router-dom - это то, что когда вы переключаете страницы , ваше приложение не прокручивается обратно наверх. В этом посте я покажу вам, как это исправить. (По иронии судьбы, это исправление, которое я собираюсь показать вам, использовалось в предыдущих версиях react-router-dom. Почему они удалили его, я до сих пор не знаю).
Компонент ScrollToTop
Компонент ScrollToTop - это уникальный компонент, который вы можете создать в своем приложении реакции. До этого момента я предполагаю, что вы создали или у вас уже открыто существующее приложение для реагирования. Вы можете создать новое приложение для реагирования, запустив npx create-react-app YOUR_APP_NAME
в терминале. Замените YOUR_APP_NAME
именем вашего приложения.
Внутри вновь созданной папки выполните следующую команду, чтобы установить response-router-dom:
npm install react-router-dom
Это мое рабочее пространствоcodeandbox:
В левом нижнем углу у меня установлен response-router-dom. Я собираюсь быстро настроить два новых маршрута в приложении, чтобы у нас была рабочая демонстрация. Это ссылка на исходный код.
Наше демонстрационное приложение должно выглядеть так:
Давайте пройдемся по коду.
В строке 1 я импортировал BrowserRouter
как Router
, который охватывает весь наш родительский компонент - в данном случае компонент приложения. Route
- это компонент, который использует path
опору, которая ссылается на другие части вашего веб-сайта. exact
- это опора, которую вы передаете в компонент Route
, которая гарантирует, что только тогда, когда path
точно совпадает - да, - компонент внутри должен визуализироваться. Switch
- это компонент из реактивного маршрутизатора, который обеспечивает отображение первого совпадающего пути.
В строке 20 я создал компонент под названием Testing
для демонстрационных целей. Позже будет визуализирован очень длинный абзац. Если вы запустите приложение и попытаетесь перейти по адресу http://localhost:3000/scroll-to-top
, вы должны увидеть An extremely long page
визуализировано. Это верно. Если у вас возникли проблемы, просмотрите исходный код здесь: https://codesandbox.io/s/happy-wind-cd025?file=/src/App.js
Внутри наших компонентов App
и Testing
давайте добавим огромный кусок lorem ipsum, и наше приложение должно перезагрузиться при сохранении, и это то, что мы должны увидеть на экране: (Обратите внимание, я увеличил размер абзаца в моем CSS до 1,5 rem)
Если вы попытаетесь перейти на страницу scroll-to-top
с помощью омнибара, вы должны увидеть тот же текст на экране.
Компонент панели навигации
Итак, давайте создадим новый компонент под названием Navbar
, который будет отображать наши 2 ссылки для перехода между нашими страницами.
function Navbar(){ return ( <ul> <li><Link to="/">Home</Link></li> <li><Link to="/scroll-to-top">Scroll page</Link></li> </ul> ) }
Так выглядит наш Navbar
компонент. Визуализируйте его под закрывающим тегом </Switch>
, а вверху добавьте следующую строку:
import { Link } from "react-router-dom";
, чтобы импортировать Link
компонент, который мы использовали выше в нашу панель навигации. Если вы все сделали правильно, прокрутите вниз, и вы увидите две ссылки. Попробуйте щелкнуть по ним, наблюдая за омнибаром, и вы увидите что-то интересное ... адрес меняется, но вы не прокручиваете вверх, когда меняете страницы, что может немного сбить вас с толку, если вы пользователь. Так что давайте это исправим.
Компонент ScrollToTop
Создайте новый компонент с именем ScrollToTop
. Вот так компонент будет выглядеть:
В самом верху обязательно добавьте эти 2 строки:
import { useEffect } from "react"; import { useLocation } from "react-router-dom";
чтобы импортировать 2 крючка, используемые в компоненте выше. Давайте пройдемся по коду.
Мы деструктурируем pathame
, которое получаем, когда настраиваем react-router-dom
, а затем добавляем наш useEffect
, чтобы указать нашему приложению прокручивать назад до позиции 0, 0 каждый раз, когда pathname
изменяется - отсюда и массив зависимостей [pathname]
.
Как только это будет сделано, визуализируйте компонент ScrollToTop
над открывающим тегом Switch
, а затем попробуйте щелкнуть ссылки навигации, и если вы все сделали правильно, то каждый раз, когда вы переключаетесь между страницами, вы будете возвращаться наверх.
Однако есть одна проблема
Если вы находитесь на главной странице и нажимаете ссылку на главную страницу, ничего не происходит. Вот и все. Я думаю, вам нужно будет проверить, находитесь ли вы на странице, которая соответствует pathname
, а затем запустить повторную визуализацию компонента, когда вы нажмете ту же ссылку.
Вывод
Вот как можно исправить проблему с прокруткой при использовании react-router-dom
.
В этой статье я поместил все свои компоненты в один файл - это не рекомендуется и фактически лишает смысла использование ReactJs. Я все равно сделал это просто для того, чтобы каждый мог легко следовать за мной.