Grok React Router через 20 минут

grok react router cherez 20 minut?v=1656553237

Привет, коллега React Hitchhiker! Хотите прокатиться на React Router? Прыгайте. Пойдем!

Чтобы понять философию React Router, нам нужно знать, что такое Single-Page Application (SPA).

Что такое одностраничное приложение?

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

Почему это так хорошо?

1. позволяет избежать перерыва в работе пользователя между последовательными страницами

2. делает программу более похожей на настольную программу

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

4. потому что это kewl и kewl и чрезвычайно-ультра-широкий-4K-level-of-kewl. ?

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

Что такое React Router?

React Router – это инструмент, позволяющий обрабатывать маршруты.

Поскольку вы имеете дело с SPA, вам нужен способ активировать содержимое, загружаемое на экран. React Router вводит концепцию под названием «Динамическая маршрутизация», значительно отличающаяся от «статической маршрутизации», к которой мы привыкли.

Когда вы имеете дело со «статической маршрутизацией», вы объявляете свои маршруты как часть инициализации вашей программы до того, как произойдет любая визуализация (Rails, Express, Ember, Angular и т.д.).

«Динамическая маршрутизация» означает, что маршрутизация происходит при визуализации программы, а не в конфигурации или условии за пределами запущенной программы.

React Router v4 поддерживает и реализует компонентный подход к маршрутизации.

Он предоставляет различные компоненты маршрутизации в соответствии с потребностями программы и платформы.

В этом конкретном случае мы собираемся исследовать потому что мы хотим использовать «динамическую маршрутизацию» в контексте «веб-программы», а другие оставить для других обстоятельств.

Кто создал React Router?

Эти два удивительных человека, Майкл Джексон и Райан Флоренс. И они заслуживают нагрузки, тонны хлопаний! Вместе они начали React Training.

Сегодня, исправьте меня, если я ошибаюсь, они шли разными путями:

Майкл Джексон продолжает развивать React Training.

Райан Флоренс создал Reach.Tech.

Имеет ли React Router какое-либо отношение к Redux?

Нет. Хотя обычно они появляются вместе.

Ты уверен? Да? Я уверен ?

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

Настройки, давайте загрязним руки

Ga6dcRb1gmEed2ge937FwIv9aR1AwIkAvGvJ
Фото Rose Elena на Unsplash

Чтобы помочь вам в этом процессе, мы воспользуемся Create React App (CRA).

В конце концов у вас будет чистый шаблон для создания простых веб-сайтов.

Если вы случайно React или Create React App не поняли, я рекомендую вам сначала ознакомиться с ними, а затем вернуться с чашкой кофе.

Хорошо, стоящим со мной: после установки CRA нужно установить пакет react-router.

Если вы используете npm, просто откройте терминал, перейдите в папку CRA и введите:

npm i -S react-router-dom

или

yarn add react-router-dom если вы используете пряжу в качестве менеджера пакетов.

Просто чтобы проверить свое package.json и убедись, что все в порядке, вот мое:

k1OxWlNSx7lJ3wBTUrYsyrJpcgFTK00hNvH7

Как видите, сейчас мы имеем react-router-dom как зависимость.

Готово, npm или yarn начать и…

Bang! Мы едем мама!

Приложение, которое мы создаем

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

The NavBar будет вездесущим компонентом, тогда как Домой, О и Темы будет отображаться ниже в соответствии с выбранными маршрутами.

Вы видите URL-адрес браузера: локальный хост:3000/дом на скриншоте ниже?

Это означает, что Домой маршрут запускается и Домой отображается.

Это будет наш окончательный результат:

Igwuii40jvc5gCBOQuuVWbEexaNZgVxbdJcP

А это… ?, это сайт?

? Да!

Голый! Просто старайтесь не испытывать предвзятости к другим сложностям, таким как стиль и т.д. Я не хочу, чтобы ты отвлекался на что-то другое, кроме грохота как просто это реализовать React Router v4.

Итак, после того, как вы оправитесь от шока, ?, давайте сделаем следующий шаг и просмотрим мой файл /src/index.js.

/src/index.js

index.js это первый файл, который загружается CRA, точка инициализации всего в вашем приложении.

Давайте посмотрим, что я сделал:

scJ4TP9j27Ph1S425FUiTbB4e-b9iC-0v-gf

Так что мы делаем?

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

import { BrowserRouter as Router } from ‘react-router-dom’;

  • Мы импортируем а <Маршрути/> компонент, созданный мной, с маршрутами, которые мы будем использовать на нашем сайте – не волнуйтесь сейчас с этим компонентом:

import { Routes } from ‘./routes’;

The <Маршрути/> компонент занимает место CRA по умолчанию <Додаток/> компонент. В основном то же самое — я только что назвал это <Маршрути/> потому что я считаю, что имеет смысл сделать код более содержательным и читабельным.

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

  • Мы обнимаемся <Маршрути/> с <Маршрутизатор/> компонент.

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

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

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

<Маршрути /> Комкомпонент

hFLFpV5UPMby62nxbB2rzQUQmAzPLbJRRUaz

Итак, в основном, что делает routes.js делать?

Он начинается с импорта React и нескольких компонентов, которые мы рассмотрим позже. Просто подумайте о них как о простых компонентах без состояния: Домой, О, Список тем, Подробности темы, NavBar и NoMatch.

Он также импортирует три компонента из react-router-dom пакет, который нам нужно будет вызвать: <Маршрут/>, и <Переспрямування/>.

После импорта мы экспортируем компонент Routes без состояния, которое вызывает NavBar (который всегда будет на экране) и a компонент.

Что делает этот парень ?

Этот компонент в основном воспроизводит первого ребенка <Маршрут> или <Переспрямування> что соответствует расположению браузера.

Он начинает тестировать следующие вещи: «Это URL-адрес браузера <Маршрут/> путь? Нет? Хорошо.» Следующий маршрут. «Есть ли URL-адрес браузера в этом другом пути? Нет.»

Следующий маршрут. «О, я понял! Именно в этом давайте запустим рендеринг компонентов и завершим проверку на данный момент (мне не интересуют другие маршруты ниже…)”

Если случайно это произойдет:

pCLNszAHXi5Tl-gq0toLitQyc1cRQeKIBcxm

второй маршрут никогда не будет запущен, потому что Switch спрыгнет, не достигнув его. Он просто идет выпить кофе… (и я тоже!!! ? Назад!)

Внутри мы определяем каждый <Маршрут/>.

Каждый <Маршрут/> сообщает это браузеру:
«Привет, браузер DOM! Если выбирает меня, потому что ваше местоположение (точно) это, пожалуйста, отразите следующий компонент».

IAEvLJjBJE6kKk-8RAsqXskmBYFYLHgM0Hck

Или в других случаях, например, ниже, он говорит:
«Эй, браузер, если любой случай ваш выбрал меня, потому что расположение – это /Темы/”что-то” для отображения деталей темы компонента. Безусловно, это выяснит кто такой это :topicId (переменная) вещь, которую пользователь просит нас согласовать и направить ее соответственно».

4xy5vihwiXuuj1xpsrhmWu7kjnmvlCn8GMJn

Хорошо всем. Поскольку имеет такое поведение по умолчанию для проверки каждого маршрута, нам нужно предоставить запасной вариант, если он ничего не отвечает:

-Bw2qOlJNvs9k2GOwX3lYgeozuPGkCjApbav

Этот последний маршрут просто воспроизводит страницу по умолчанию, в которой указано, что ни один маршрут не совпадает с ошибкой HTTP 404.

Помните, что здесь мы имеем дело со SPA и с «Динамичной маршрутизацией», поэтому это симуляция, будто мы требуем маршруты к серверу? На самом деле, нет!

Мы просто не знаем, что отобразить, если пользователь, например, вставит что-то несоответствующее в URL, например: http://localhost:3000/HelloWorld.

Поскольку этот маршрут не определен, мы предоставляем a NoMatch компонент для информирования их об отсутствии маршрута

<Переспрямування/> существует потому, что если пользователь пытается загрузить URL без какого-либо маршрута http://localhost:3000/это получило бы a NoMatch потому что для него не определен маршрут. Так что лучший способ справиться с этим – воспользоваться <Переспрямування/> и подтолкнуть пользователя к маршруту /Домой который по умолчанию является нашим первым экраном программы.

Почему это нужно?

Опять же, потому что обычно пользователь запускает программу, вводя ее общий URL-адрес и без <Переспрямування/> первый воспроизводимый компонент будет . Мы не хотим этого, мы хотим, чтобы пользователь был перенаправлен на <Головна/> компонент.

Просмотры и/или компоненты

На этом этапе нашего руководства я хотел бы немного остановиться, чтобы отличить представление от компонента. Это не суть этого руководства, но оно будет иметь смысл после того, как я покажу вам структуру папок. CRA.

Когда мы думаем в React и начинаем создавать приложение, и оно начинает расти, иногда мы останавливаемся, потому что чувствуем, что все идет не в правильном месте.

Это означает, что мы должны дать названия этим вещам и разделить их в разные «ящики» или «папки».

Просмотры и компоненты – это вещи, отображаемые на экране. Итак, чем одна вещь отличается от другой?

И разве взгляды не являются компонентами? А компоненты не просмотры?

Что ж, с точки зрения языка кодирования, View и Component, безусловно, являются функциями или классами — компонентами без состояния или сохраняющими состояние компонентами, как мы называем это на жаргоне React.

Итак, чем они отличаются?

Ну, у View есть маршрут. Внутри этого просмотра можно отобразить многие компоненты.

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

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

Давайте посмотрим на мою структуру папок CRA:

hkA3J3XhCQmBMSaZQiKxrMHciTyAglBaveTJ
Структура папок CRA

Итак, как вы видите, я и 99% населения мира люблю хранить апельсины и груши в разных корзинах. И вы тоже! Я верю в тебя! Я доверяю тебе!

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

Но чтобы различить понятия, внимательно посмотрите на Views и Components.

Домой, О, Список тем и NoMatch есть взгляды. У них есть собственные правильные маршруты, которые запускают их.

NavBar является вездесущим компонентом, который всегда вызывается. У него нет маршрута.

Подробности темы является компонентом, который будет отображать информацию о теме, когда TopicList/:topicId запускается маршрут. Это компонент многоразового использования, который можно импортировать в другие места и переработать или расширить. У него нет конкретного маршрута.

Домашняя страница / О Views

В главной папке есть файл index.js и а Home.js файл.

Имея index.js экспорт других файлов является хорошей практикой. Просто поверь мне или принеси вина, потому что это будет долгий разговор?

…о, давайте просто выпьем вина, а потом поговорим! ?

JhqPLcyHbEQyDQJDGPmkFAJ-mR9-pgdCMzsL
index.js, экспортирующий домашний вид
B2JGUGC4cflc25P0fLBAXlxnnsioeIJFpNqV
Компонент просмотра Home.js без состояния

Это простой вид, экспортирующий только название. The О взгляд равен этому.

Теперь давайте посмотрим на Просмотр списка тем потому что это несколько иначе.

Просмотры TopicList и TopicDetail

GbOKrOTh4Y4daFnJqRjMwikEiFxzmcg6fjHV
Код просмотра списка тем

Поэтому Просмотр списка тем имеет эту деталь обработки разных маршрутов. Помните, что /Тема/:topicId маршрут, что <Маршрут/> сказал разрешить Подробности темы ручка?

Вот мы с этим.

Список тем получает {матч} как реквизит. Пусть деструктуризация вас не пугает. Мы могли просто получить реквизит и позвонить реквизит.матч. Вот как сегодня все классные дети деструктурируют реквизит, чтобы улучшить читабельность и процесс React. Мне тоже очень нравится! Это все равно, что поднять коробку с мобильным внутри или поднять мобильный напрямую. На самом ли деле он хранился внутри коробки, но сейчас вам нужно только проверить свою электронную почту? пусть коробка остается на месте! Не берите его с собой на работу!

В любом случае, давайте сосредоточимся на коде.

В этом файле мы импортируем компонент из React Router под названием { Ссылка } потому что мы хотим создать ссылку?

Мы получаем совпадение с маршрута, который мы выбрали, когда щелкнули Темы и мы отображаем неупорядоченный список с 3 вариантами: Тема 1, Тема 2 и Тема 3.

В основном, если пользователь выберет Ссылки по теме 1 на экране, <Посилання/> нажмет URL-адрес браузера на этот путь /Темы/Тема1.

Что будет дальше? <Маршрутизатор/> и <Перейти /> обнаружить, что URL изменился, и просмотрите их информацию, чтобы проверить, какой маршрут нужно запустить. Поэтому они обнаруживают, что теперь инициированный маршрут «тот для». /Темы/:topicId и триггеры Подробности темы предоставление. Подробности темы будет предоставлять Тема 1 детали.

1s20EOEWOhQoRsqZdn5SnOwixBEDUV7VOP65
Компонент TopicDetail

Подробности темы получает матч с маршрутизатора и воспроизводит topicId расположен по адресу match.params.topicId.

Компонент NavBar

The NavBar компонент играет здесь особую роль, поскольку он вездесущ.

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

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

RRwqmKgTbtRjQNW28kK0neRfS6idxrjYhjOT
Код компонента NavBar

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

Последнее, но не менее важное

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

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

Библиография

Для создания этой статьи я использовал документацию React Router, которую можно найти здесь.

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

Эта статья является частью 1 серии под названием «Руководство для автостопщика React Router v4». Части 2–4 придут на freeCodeCamp в течение этой недели!

Спасибо большое!

Добавить комментарий

Ваш адрес email не будет опубликован.