Отношения любовь-ненависть между React Router и React Components

Отношения любовь-ненависть между React Router и React Components

От автора: как разработчикам React, большинству из нас нравится работать с React Router и нравится то, насколько хорошо он подходит для нашего приложения React.

Почему мы любим React Router:

Прекрасно работает с React и следует тем же принципам

Навигационный аспект маршрутизатора очень просто понять

Компонентный состав, декларативный пользовательский интерфейс, управление состояниями и то, насколько он следует основному потоку React (событие => изменение состояния => ререндеринг)

Надежная функция истории браузинга, которая позволяет пользователям перемещаться по всему приложению, отслеживая состояние просмотра

Тем не менее, вы столкнетесь с некоторыми проблемами при использовании React Router, если потребности вашего приложения станут немного более сложными, чем обычные примеры использования, которые можно найти в любом учебном пособии в Интернете.

Хорошей новостью является то, что даже при этих сценариях React Router по-прежнему позволяет нам решать проблемы чистым способом; но решение может быть не столь очевидным на первый взгляд. Это случилось с нашей командой Fjong, когда мы изменяли параметры запроса по маршруту и ожидали, что будет выполнен реререндеринг компонента, но это не происходило.

Прежде чем мы рассмотрим эту конкретную проблему и как мы ее разрешили, давайте поговорим о нескольких аспектах великих отношений между React Router и React Components.

Отношения любви

У React Router и React Components отличные отношения. Это в основном это касается шаблона, в котором оба они следуют одному и тому же циклу событий, о нем говорилось выше (событие => изменение состояния => ререндеринг). Теперь, имея в виду этот поток, мы собираемся исправить общую проблему при навигации по приложению; прокрутка вверх страницы при изменении маршрута.

Представьте, что у вас есть набор компонентов с именами Home, About и Search.

Теперь представьте, что когда вы переходите к /search, вам нужно выполнить несколько прокруток, чтобы увидеть ваш любимый элемент на SearchPage.

Затем вы вводите ссылку в заголовке, чтобы перейти к /about, а затем вдруг вы видите нижнюю часть страницы About Us — вместо верхней части, что весьма раздражает. Существует много способов решить эту проблему, но React Router предоставляет вам все необходимые инструменты для выполнения этой задачи, чистые и правильные. Давайте рассмотрим это в действии.

Ненависть

Но как и в любых отношениях, в отдельных ситуациях все идет не так хорошо. То же касается и React Router и React Components. Чтобы лучше понять это, давайте рассмотрим возможный сценарий в приложении.

Представьте, что вы переходите от /search к /about, и когда вы переходите к About Us, страница, очевидно, повторно отображается, как и следовало ожидать. То же самое происходит при переходе от /about к /search.

Теперь представьте, что ваш SearchPage привязывает параметры поискового запроса к URL-адресу, и вы ожидаете ререндеринга при переходе с /search?tags=Dresses на /search?tags=Bags. Здесь мы меняем поисковый запрос на путь ReactRouter location.path=/search, который распознается ReactRouter, как свойство в том же месте, что и location.search = ?tags=Dresses or ?tags=Bags.

Ни React Router, ни ваш компонент не понимают, что им нужно выполнить ререндеринг, потому что технически мы находимся на одной странице. React Component не согласен с вами в том, что при переходе между двумя маршрутами, которые находятся по одному пути, но имеют разные поисковые запросы, нужно выполнять ререндеринг.
На данный момент наши Route и Component немного обособлены. Какая жалость 🙁

Итак, как мы можем исправить эту проблему? Ну, оказывается, каждый из них содержит кусочек головоломки, разгадав которую, мы можем исправить проблему. React Router может сообщить нам, изменились ли параметры поискового запроса в URL-адресе и что более важно сделать это в соответствии с нужными событиями жизненного цикла React. После этого Component решает, что делать с этой информацией.

В этом случае, если компоненту нужен ререндеринг (указывается логическим свойством, называемым RouteKey), он передает компоненту уникальный ключ, который будет представлять собой комбинацию location.pathname и location.search. (Это общее правило для ключей, которые должны быть уникальными, стабильными и предсказуемыми). В этом случае компонент получает новый ключ каждый раз, когда запрашивается маршрут; и даже, если вы остаетесь на одной странице, он будет повторно отображать страницу без каких-либо побочных эффектов. Посмотрим, как это работает на практике!

Заключение

Мы рассмотрели примеры того, как React Router и React Component работают вместе идеально, а также сценарии, когда они немного отстранены друг от друга. Но самое главное помнить, что в большинстве случаев React Router следует тем же принципам и шаблонам проектирования, что и React, и, ознакомившись ближе с этими принципами и контекстами их выполнения, вы сможете эффективнее исправлять ошибки в React Router.

Автор: Kasra

Источник: //blog.bitsrc.io/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: