День 12: React Router
На этой неделе мы познакомились с еще одной технологией — React Router. Я все еще не совсем понимаю, как реализовать это в своем приложении. Поэтому я думаю, что сегодня будет хороший день для меня, чтобы сделать обзор React Router.
Что такое React Router?
Давайте разберем это. Что вообще такое маршрутизация? Маршрутизация относится к поддержанию веб-страницы в актуальном состоянии с текущим URL-адресом. На данный момент я в основном создавал приложения, которые размещались на одной веб-странице. Это значительно упрощает процесс создания для разработчика, но может сильно затруднить работу пользователя.
Имея одну веб-страницу без React Router, пользователь не может использовать кнопки «назад» и «вперед», предоставляемые браузером. Пользователь не может добавить страницу в закладки и не может легко делиться контентом со страницы.
React Router дает нашим пользователям эти возможности, заставляя наш одностраничный веб-сайт имитировать многостраничный веб-сайт. Это позволяет нам условно отображать компоненты на основе текущего URL-адреса. Написание многостраничных веб-сайтов может быть сложной задачей, но React Router дает нам преимущества многостраничного сайта с простотой одностраничного веб-сайта.
Как это работает?
React Router имеет встроенные компоненты, которые упрощают нашу работу. Давайте посмотрим на каждый из них.
Возможно, самый важный компонент, основная обязанность Route — отображать некоторый пользовательский интерфейс, когда его путь совпадает с текущим URL-адресом.
В приведенном выше примере Route используется для управления двумя отдельными компонентами. Первый ‹Route› будет отображать компонент ‹Home /›, если путь к каталогу не указан. Когда пользователь переходит по пути /news, React Router будет отображать дочерний компонент только внутри родительского компонента ‹Route path="news"›. Это очень простой пример магии ‹Route›.
2. ‹Перенаправление›
‹Redirect› — это компонент, который я не использовал так часто, но, тем не менее, он по-прежнему мощный. Redirect делает то, что звучит так: он перенаправляет пользователя в новое место.
3. ‹Ссылка›
Другой компонент с довольно семантическим значением, ‹Link›, обеспечит навигацию по определенному пути вашего приложения.
4. ‹Навигация›
‹NavLink› очень похож на ссылку. Это специальная версия ‹Link›, которая добавит атрибуты стиля к визуализируемому элементу, когда он соответствует текущему URL-адресу. После посещения компонента с помощью ‹NavLink› его цветовая стилизация изменит цвет так же, как обычная гиперссылка.
5. ‹Переключить›
Коммутатор работает в тандеме с компонентом «Маршрутизация» для эффективного управления маршрутизацией пути. Рассмотрим пример ниже. Route появляется без оператора switch. Мы видим путь /about, но мы также видим, что путь пользователя имеет двоеточие, представляющее динамический путь. При таком построении этих путей компоненты ‹About /› и ‹User /› будут автоматически отображаться на странице. Этот компонент Switch может создавать очень мощную логику, которой гораздо проще управлять.
Мы можем избежать этого двойного рендеринга, обернув эти компоненты Route компонентом Switch. Switch будет отображать маршрут eисключительно, а не включительно, отображая только один путь за раз.
Наша реализация
Вот пример нашей реализации Router в нашем текущем проекте. Мы используем компонент ‹Switch /› в нашем компоненте приложения для управления. Во-первых, пользователь направится к нашему компоненту AllMovies на нашей домашней странице. Как только пользователь щелкнет постер фильма, он увидит только компонент ‹MoviePage /›. Вы также заметите, что мы добавили ‹Route /›, который также ведет к нашему компоненту ‹Error /› в случае, если пользователь попытается посетить несуществующий URL-адрес фильма.
На сегодня все — увидимся завтра!
