React Router — это библиотека для одновременного рендеринга нескольких компонентов. Маршрутизатор React и маршрутизатор Express — это две совершенно разные библиотеки, которые не следует путать. При работе с библиотекой вам нужно будет установить новые пакеты так же, как при установке пакета React npm. Еще одна приятная особенность маршрутизатора React заключается в том, что он фокусируется на извлечении одного конкретного компонента, в то время как React без библиотек извлекает их все, даже ненужные компоненты. Есть 4 основные идеи, которые нам нужно охватить: (Маршрут, Ссылка, Навлинк, Перенаправление и Подсказка).
Маршрутизатор
Традиционно наш код в React выглядел бы так.
Это простой оператор возврата без оболочки. Выполнение чего-то подобного на изображении ниже позволит вам использовать компонент React Router.
Нам нужно будет импортировать маршрутизатор, чтобы мы могли использовать тег React. Внутри этих тегов маршрутизатора нам нужно будет вернуть путь маршрута, который может содержать простой тег h1. Что-то вроде этого изображения представляет концепцию.
Это отличается от размещения всех компонентов в одном файле без оберток: если бы мы использовали панель навигации и щелкнули элемент, был бы выбран только этот элемент. Это позволяет React быстрее реагировать на отображение и рендеринг того, что нам нужно. Итак, что на самом деле делает маршрутизатор React, так это сохраняет URL-адрес в стоке с URL-адресом, по которому мы нажимаем. Чтобы разбить приведенный выше код. Для маршрута нужен путь, который является частью URL в нашем примере. Когда мы вводим URL-адрес с косой чертой в конце, мы попадаем на домашнюю страницу. Если будет введено что-то еще, эта страница не будет отображаться. Этот пример по-прежнему приведет нас на домашнюю страницу, даже если путь не соответствует URL-адресу, потому что в нем отсутствует точное свойство. Что-то вроде этого нужно.
Мы видим, что у нас все еще есть случайный тег div, обертывающий все содержимое. Отличие заключается в том, что мы используем импортированный компонент маршрута, чтобы указать точный путь для компонента LandingPage, созданного в другом файле. Отличным примером этого является приведенный ниже код.
Два компонента маршрутизатора используются с разными путями. Если бы пользователь ввел URL-адрес только с дополнительным символом «/» в конце, маршрут привел бы пользователя на целевую страницу. То же самое для пути к приложению. Ввод «/app» перенесет пользователя на страницу AppLayout веб-сайта. Еще одно важное дополнение для точного пути для работы в нашей настройке панели навигации — использование ссылок.
Ссылки
Ссылки будут идти внутри тегов навигации и очень просты. Это будет выглядеть примерно так, как показано на изображении ниже.
Кавычки — это то, что будет использоваться для указания желаемого пути, по которому пользователь захочет пойти. Ссылка по-прежнему является компонентом, импортированным из React, и используется для обновления страницы. Компонент Route, который мы использовали, — это то, что рендерит реальную страницу. Последним ключевым компонентом реактивного маршрутизатора является коммутатор.
Выключатель
Коммутатор просматривает всех своих дочерних элементов, которые являются маршрутами, и находит URL-адрес, соответствующий пути. Переключатель будет выглядеть так.
Это подводит нас к следующей теме — вложенным маршрутам. Вложение маршрутов происходит в компоненте коммутатора, но он отображает или загружает введенный URL-адрес, который равен его пути. Итак, если мы вводим «/ about». Компонент-переключатель будет отображать компонент «О программе». Для каждого приложения React потребуется компонент маршрутизатора. Еще одно правило использования реактивных маршрутизаторов заключается в том, что объявление маршрутизатора должно происходить в родительском элементе всех остальных компонентов.
Резюме
Коммутатор и компонент Route имеют определенное имя Route Matchers. Компонент Switch ищет URL-адреса, соответствующие его собственному пути. Поиск происходит в компоненте Route, который является дочерним элементом Switch. Когда найден один URL-адрес, соответствующий этому, он отображает только этот компонент и не отображает все остальные компоненты. Это экономит время и память. Вот пример компонента Route, являющегося дочерним элементом Switch.
В приведенном выше коде мы видим, что если путь Route = «/about», то отображается компонент About. Мы можем думать о компоненте Switch как об операторе switch в Javascript. Наконец, мы должны рассмотреть компонент Nav или Router Changers. Компонент Link является частью изменений Router, и это то, что создает всю ссылку.
