Если вы знакомы с 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. Я все равно сделал это просто для того, чтобы каждый мог легко следовать за мной.