Понимание основ маршрутизации в реакции

Глава 5 из книги; Robula React – соавторы Джона Кагга

Покрытие изображения Admond atto.

** RECAP: – ** в Глава одна , познакомиться, чтобы реагировать с ES6. Если вы новичок, чтобы отреагировать, просто нужна обмотка или нужно нежное введение в функции ES6, которые чаще всего используются по всей этой книге, обзор Глава одна Отказ

В Глава два , познакомиться с реактивными компонентами. Они являются строительными блоками любого приложения React, вы будете построить. Продолжай и просмотрите, что Глава Если вам еще не комфортно с реактивными компонентами, а затем вернитесь здесь.
В Глава три , познакомиться с государством в реакции. Понимание состояния и того, как он работает, откроет вашу возможность создавать мощные компоненты. Продолжай и просмотрите, что Глава Если вам еще не комфортно с состоянием реагирования, а затем, вернитесь здесь.
В Глава F наше , познакомиться с введением пользователей в реакции. Понимание того, как обрабатывать пользовательский ввод (в основном через формы) разблокируют вашу возможность создавать интерактивные приложения. Продолжай и просмотрите, что Глава Если вам еще не комфортно при обработке ввода пользователя, а затем, вернитесь здесь.

Маршрутизация – это возможность перемещаться между разными частями приложения, когда пользователь вводит URL или щелкнул элемент (ссылка, кнопка, значок, изображение и т. Д.) В приложении.

До этого момента вы имели дело с простыми проектами, которые не требуют перехода с одного представления к другому, поэтому вам еще не взаимодействуют с маршрутизацией в реакции.

В этой главе вы познакомитесь с маршрутизацией в приложении React. Чтобы расширить свои приложения, добавив возможности маршрутизации, вы будете использовать популярные Реагистрационный маршрутизатор библиотека. Стоит отметить, что эта библиотека имеет три варианта:

=> Реагистрационный маршрутизатор : Основная библиотека => React-Router-DOM : Вариант основной библиотеки предназначен для использования для веб-приложений => React-Router – родной : Вариант основной библиотеки, используемой с реактивным ориентиром в разработке приложений Android и IOS.

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

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

npm install --save react-router-dom

Маршрутизаторы

Пакет React-Router включает в себя ряд маршрутизаторов, которые мы можем воспользоваться в зависимости от платформы, которую мы ориентируемся. К ним относятся Броситон , Hasthrooter и MemoryRouter Отказ

Для приложений на основе браузера мы строим, Броситон и Hasthrooter хорошая подгонка.

Броситон Используется для приложений, которые имеют динамический сервер, который знает, как обрабатывать любой тип URL, тогда как Hasthrooter Используется для статических сайтов с сервером, который отвечает только на запросы на файлы, о которых он знает.

Идти вперед, мы будем использовать Броситон С предположением, что сервер работает наше приложение, является динамическим. Стоит отметить, что любой роутер рассчитывает получить только один ребенок. Взять пример ниже

ReactDOM.render(
  
    
  ,
  document.getElementById('root'));

В этом примере <Приложение/> Компонент – это ребенок для И должен быть единственным ребенком. Теперь маршрутизация может произойти в любом месте в <Приложение/> Компонент, однако, считается хорошей практикой для группы и размещения всех маршрутов в том же месте. Больше на это позже.

История

Каждый роутер создает История Объект, который он использует для отслеживания текущего местоположения и повторно рендерирует приложение всякий раз, когда это изменение местоположения. По этой причине другие компоненты React Router полагаются на это История присутствует объект; Вот почему они должны быть представлены внутри роутера.

Броситон использует HTML5 История API для хранения пользовательского интерфейса в синхронизации с URL в адресной строке браузера.

История Объект, созданный роутером, содержит ряд Свойства и одно из свойств местоположения, значение которого также является объектом Отказ Недвижимость местоположения является одним из них, мы сделаем много внимания в этой главе, так как остальные выходят за рамки этой книги.

Когда более ранний пример отображается в браузере, вы должны увидеть созданный История Объект в окне RACT DEVTOOLS, как показано ниже.

Расположение Объект в пределах объекта истории формируется так

{ pathname, search, hash, state }

Расположение Свойства объекта получают из URL приложения.

Маршруты

<Маршрут/> Компонент является одним из важнейших строительных блоков в пакете React Router. Он делает соответствующий пользовательский интерфейс, когда текущее местоположение соответствует маршруту путь Отказ путь это опора на <Маршрут/> Компонент, который описывает путь, который маршрут должен соответствовать, как показано в примере, следующем

Этот маршрут соответствует, когда Pathname является /Предметы или все остальные пути, которые начинаются с /предметы/ Например /Предметы/2 Отказ Если намерение будет строго совпадать только /Предметы , <Маршрут/> Компонент принимает точный пропры Добавление этого гарантирует, что сделан только путь, который точно соответствует текущему местоположению. Ниже приведен пример, который использует точный пропры

Когда путь Соответствует, должен быть отображен реактивный компонент, чтобы в пользовательском интерфейсе есть изменение.

Также стоит отметить, что Путь к регессу Пакет используется пакетом React-маршрутизатора, чтобы превратить строку пути к регулярному выражению и совпадать с током Расположение Отказ

<Маршрут/> Компонент предоставляет три выброса, которые можно использовать для определения того, какой компонент для рендера:

=> компонент => рендеринг => дети

Компонент опоры

Компонент Опреры определяют реактивный элемент, который будет возвращен по маршруту, когда путь соответствует. Этот реактивный элемент создан из предоставленного компонента с использованием Rect.Createelement Отказ Ниже приведен пример, используя Компонент пропры

В этом примере Предметы Компонент будет возвращен, когда путь соответствует текущему Расположение Отказ

Рендеринг

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

 (List of Items)}
/>

В приведенном выше примере, когда текущее местоположение соответствует путь Точно создается элемент реагирования и строка Список предметов отображается в браузере.

const cat = {category: "food"}
 }
/>

Во втором примере данные представляют собой дополнительные опоры, которые передаются на компонент элементов. Здесь кот передается как дополнительный опора.

Дети опоры

дети опоры похоже на оказывать PROP, поскольку он всегда ожидает функции, которая возвращает реактивный элемент. Основное отличие заключается в том, что элемент, определенный ребенок PROP возвращается для всех путей независимо от того, соответствует ли текущее местоположение пути или нет.

}/>

В этом случае Предметы Компонент – это всегда оказано.

Выключатель

Библиотека React-Router также содержит <Выключатель/> Компонент, который используется для обертывания нескольких <Маршрут/> составные части. Переключатель Компонент Только Выбирает Первый Соответствующий маршрут среди всех его детских маршрутов.

Следующий пример демонстрирует, как будут вестись несколько маршрутов в отсутствие Переключатель составная часть.

 (List of items)}
/>
 (Item with id of 2)}
/>

В браузере, когда вы перейдите к /Предметы/2 Элементы реагирования в обоих Маршрут Компоненты будут отображаться, как показано ниже

List of itemsItem with id of 2

Это может быть предполагаемое поведение, где первый компонент отображает заголовок и другие маршруты с одинаковым базовым путем визуализации другого UIS.

Давайте модифицируем пример выше и включите <Выключатель/> компонент и наблюдать за поведением, когда мы переписываемся на /Предметы/2 Отказ


   (List of items)}
  />
   (Item with id of 2)}
  />

В браузере только Список предметов будет оказана. Это потому, что Переключатель Компонент соответствует только первым путем, который соответствует текущему Расположение Отказ В этом примере маршрут /Предметы был сопоставлен, когда /Предметы/2 был введен в адресной строке браузера.

Ссылка на сайт

Пакет React-Router также содержит Компонент, который используется для перемещения разных частей приложения путем гиперссылок. Это похоже на анкерный элемент HTML, но главное отличие состоит в том, что используя Ссылка Компонент не перезагружает страницу, а скорее меняет пользовательский интерфейс. Использование якорного тега потребуется, чтобы страница перезагружалась, чтобы загрузить новый интерфейс UI. Когда Ссылка Компонент нажат, он также обновляет URL.

Давайте рассмотрим использование Ссылка Компонент далее, создавая приложение, которое позволяет нам ориентироваться между Категории и Предметы Отказ

export const Home = () => (
  
    Home Component
    
      
        Items
      
      
        Category
       
    
  
);

Главная Компонент содержит ссылки на Предметы и Категории составные части.

Компонент использует к как опора определить Расположение навигаться к. Этот опоры может быть либо строкой, либо Расположение объект. Если это строка, она преобразуется в Расположение объект. Обратите внимание, что путь Pathname Должен быть абсолютным.

Чтобы настроить пример на вашем компьютере, клонировать проект здесь [Вставить ссылку здесь] и запустить NPM Установка && NPM Начните Отказ Оказываемая страница должна выглядеть так

Нажав на Предметы Ссылка запускает интерфейсы UI и обновляет URL в адресной строке.

Аналогично, нажав на Категория Связь срабатывает на изменение и обновляет URL в адресной строке.

Вложенная маршрутизация

Теперь у вас есть понимание того, как <Маршрут/> Компонент и путь работы. Теперь мы можем двигаться дальше к вложенной маршрутизации в приложении React.

Когда роутер путь и Расположение успешно сопоставлены, а Матч Объект создан. Этот объект содержит информацию о URL и пути. Эта информация может быть доступна в качестве свойств в объекте Match.

Давайте посмотрим на свойства:

=> URL : Строка, которая возвращает соответствующую часть URL => путь : Строка, которая возвращает путь маршрута => Isexact : Логический, который возвращает правду, если матч был точным => Пармы : Объект, содержащий пары ключа-значений, которые были сопоставлены Путь к регессу упаковка.

Вы можете попробовать это использовать Тестер маршрута соответствовать маршрутам на URL.

Чтобы успешно достичь вложенного маршрута, мы будем использовать Match.url Для вложенных ссылок и Match.Path для вложенных маршрутов.

Давайте рассмотрим использование вложенного маршрутизации, работая на примере. Клонировать проект здесь и беги NPM Установка && NPM Начните Чтобы настроить его и выпущено.

Этот пример содержит четыре компонента;

=> Заголовок Компонент, который содержит дома, элементы и категории ссылки => Главная Компонент, который содержит фиктивные данные => Предметы Компонент, который содержит список фиктивных элементов => Категория Компонент, который демонстрирует вложенный маршрутизацию и динамический маршрутизацию

Мы будем сосредоточиться на Категория Компонент, поскольку он содержит вложенные и динамические маршруты.

export const Category = ({match}) => (
  
  Category Component
  Click on a category
  
    
      Shoes
    
    
      Food
    
    
      Dresses
    
  
);

На основе фрагмента кода выше, когда Категория Связь нажата, маршрут путь соответствует и Матч Объект создан и отправлен как опоры Категория составная часть.

В пределах Категория Компонент, Матч Объект разрушен в списке аргументов, а ссылки на три категории создаются с использованием Match.url Отказ

Шаблонные литералы используются для построения значения опоры на Ссылка Компонент для разных /Обувь , /еда и /Платья URL.

Открытие примера в браузере и нажатие на ссылку категории раскрывает три разных категория. Когда нажата любая одна из этих категорий, обновления URL, однако, нет никаких изменений в пользовательском интерфейсе.

Чтобы исправить эту ошибку и убедитесь, что нажатие пользовательских интернет-пользователей, когда нажата ссылка категории, мы создаем динамический маршрут в пределах Категория Компонент, который использует Match.Path для его путь опоры, а затем динамически меняют пользовательский интерфейс.

 
                (
                  {props.match.params.categoryName} category
                 
                )
         }
/>

Приближаясь ценностью путь опоры в фрагменте кода выше, вы можете видеть, что мы используем : CateCourceName , переменная в Шида Отказ

: CateCourceName это путь параметр в URL и ловит все, что приходит после /категория Отказ

Передавая ценность для путь Опора в этом случае спасает нас от необходимости жесткокодирования всех различных категорий маршрутов. Кроме того, обратите внимание на использование шаблонных литералов для построения правильного пути.

Путь как Категория/Обувь создает Param объект, как один ниже

{
 categoryName: "shoes"
}

оказывать Пример на примере этого маршрута запускает встроенный рендер, который отображает CatechyName Paral от Матч объект, содержащийся в реквизитах.

Это должно исправить проблему неизменного интерфейса UI, и теперь, нажав на одну из категорий, должен вызвать обновление URL, так и UI, как так

Защищенные маршруты

Обоснование о том, что является защищенным путем в том, что когда пользователь пытается получить доступ к части приложения без входа в систему, они перенаправлены на страницу входа в систему, чтобы войти в приложение.

Для этого перенаправления на работу, как предполагалось, Реагистрационный маршрутизатор Пакет предоставляет компонент для обслуживания этой цели. Этот компонент имеет к опоры, переданный ему в форме объекта, содержащего Шида и Государство как показано ниже.

Здесь Перенаправить Компонент заменяет текущий Расположение В стеке с Шида Предоставляется в объекте ( /login ), а затем хранит Расположение что пользователь пытался посетить, в Государство имущество. Значение в Государство Доступ к доступу из Вход Компонент, использующий This.props.location.state Отказ

Например, если пользователь пытается перейти к /admin , защищенный маршрут, без входа в систему, они будут перенаправлены на страницу входа в систему. После успешного войти, они будут перенаправлены на /admin , маршрут, который они намеревались посетить в первую очередь.

Пользовательские маршруты

Для достижения концепции защищенных маршрутов нам нужно сначала понять, как создавать пользовательские маршруты.

Пользовательские маршруты – это модный способ сказать гнездование маршрута внутри компонента. Обычно это делается, когда необходимо решить, следует ли оказывать компонент или нет.

В случае защищенного маршрута данный маршрут должен быть доступен только тогда, когда пользователь вошел в систему, в противном случае пользователь должен быть направлен на страницу входа в систему.

Давайте рассмотрим пользовательские маршруты больше в следующем примере. Клонировать проект здесь и беги NPM Установка && NPM Начните установить.

Частный маршрут также сгруппирован со всеми другими маршрутами, как показано ниже.

Частный маршрут имеет путь , Компонент и Isauthenticated реквизит. Давайте посмотрим на частный (обычай) маршрут.

Мы разрушаем реквизиты в списке аргументов и переименовать Компонент к Компонент Отказ Мы используем Маршрут Компонент, передавая его ... отдых и оказывать реквизит. В пределах оказывать PROP, мы пишем логику, которая определяет, следует ли сделать компонент, и который один для рендеринга, если пользователь включен. В противном случае пользователь перенаправлен на страницу входа.

Вход Компонент содержит метод фиктивной аутентификации, который подписывает пользователя, когда они нажимают на Вход Кнопка внутри его оказывать метод. Смотрите ниже фрагмент кода от Вход составная часть.

RedirectToreferrer Государственная собственность устанавливается на правда Когда пользователь записан. Это вызывает перенаправление на маршрут, который они собирались посетить, или к « »/ «Путь в том, что они перемещаются непосредственно к маршруту входе в систему.

Беги NPM начать Если у вас еще нет проекта и перейдите к localhost: 3000 Отказ Вы должны увидеть это

Нажав на Админ Ссылка, когда не подписано в перенаправлении вас на /Вход Страница, показывающая Вход кнопка.

После нажатия на Вход Кнопка, вы перенаправлены на страницу защищенного администратора, как показано ниже

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

Если вам нужен переподготовки на любом материале, покрытом в более ранних главах или не имел возможности проверить их, найти ссылки на них ниже:

Руководство для начинающих для реагирования с ES6 _Chapter 1 из книги; Vumbula React – соавторы John Kagga_medium.com

Понимание компонентов реагирования _Chapter 2 из книги; Vumbula React – соавторы Edmond Atto_Medium.com

Понимание основ государства в реакции _Chapter 3 из книги; Vumbula React – соавторы John Kagga_medium.com

Обработка ввода пользователя в React – Crud _Chapter 4 из книги; Vumbula React – соавторы Edmond Atto_Medium.com

Если вы нашли эту статью полезную, протягивайте к кнопке 👏 и ударим ее столько раз, сколько вам нравится читать этот пост. Ваши ответы также высоко ценятся. Вы также можете найти меня на Twitter Отказ