скрытое значение конфигурации маршрута

skrytoe znachenie konfiguraczii marshruta?v=1656538458

Добро пожаловать в Руководство автостопом с React Router v4, часть IV!

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

Итак, чтобы немного подытожить то, что мы делали в начале, давайте посмотрим на нашу первоначальную routes.js файл:

uweHGbrLczGHKPDEXVe34FNAOo5OTMW32bbv
routes.js (начальный файл)

Наши Маршруты компонент возвращает a разд с NavBar и а Переключатель где мы определили все маршруты нашего приложения.

Нашим первым шагом в этой части 4 будет определение массива маршрутов.

Массив маршрутов

AfI92QlBlYm6ovQJGTLD9XjyaO0pdNKJUSuk
массив конфигурации маршрутов

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

Хорошо! Что теперь?! ?

Реорганизуйте старые жестко закодированные маршруты

Теперь давайте очистим наши жестко закодированные маршруты и коммутаторы!

eGOQoXHqYMhhKHus0C0YcGdUR6Rygv7J40XV
улучшенный компонент Маршруты

Да! До свидания все эти строки кода. Что мы на самом деле делаем?

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

Компонент

Между тем, нам нужно создать этот компонент. Я решил создать его отдельно и импортировать в routes.js файл.

q6WgEVi9gJUXYvyQEJklbude-zcMB5nhNDya
Компонент MakeRouteWithSubRoutes

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

Как реквизит у нас есть путь и метод визуализации, который будет вызывать route.component вы хотите воспроизвести (тогда передав в него реквизиты распространения и подмаршруты, которые ему нужно знать).

Эти маршруты поступают из массива конфигурации маршрутов – поняли? Хорошо! ?

Список тем (подмаршрутизация)

Учитывая это, давайте ограбим Список тем компонент, потому что он получает подмаршруты из массива конфигурации маршрута:

VZQlFJucdpf7VnVtnpsPgxPxz23EoeOxc2cI
Компонент TopicList с подмаршрутизацией

Итак, что здесь происходит? Наши Список тем сейчас импортирует компонент и повторное использование с полученными им маршрутами.

Это также делает а маршруты. над подмаршрутами и повторяет процесс, сделанный в routes.js файл.

Найдите минутку, чтобы понять это и поиграть с ним!

Все больше и больше подмаршрутизации

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

Что, если бы мы хотели сделать больше подмаршрутизации?

Простенькая! Просто продолжайте развивать или изменять массив конфигурации маршрутов!

masX7pCVdt9vELBX-3d74HMYz1D9W4FJ5sif
массив конфигурации динамических маршрутов

Увидеть? Маршруты с /Темы/:topicId может быть просто массивом, подобным его родительским маршрутам. Но я решил улучшить и вызвать функцию, которая вызывает API и возвращает новый массив маршрутов (представьте, что она получает API?).

Итак, как мы можем проверить это в приложении?

Поставим а console.log внутри Подробности темы компонент и проверьте, что он получает:

tnagiA612FCg0Nc6-9Cp2eFRoKoH657lRPaa

Я призываю маршруты() в console.log потому что теперь этот подмаршрут есть функция! Помните? Все хорошо! ?

ACsSVAt8jg -- jGIR993-N0njgW4nndEuTiCv
console.log(routes())

Да, мама! Мы сделали это! Мы получаем маршруты динамично и распространяем их на наши подмаршруты и компоненты. Это так прекрасно!

NoMatch и неоднозначные маршруты

Подождите! Где наша NoMatch Компонент?

Ладно, давайте введем это в наш массив конфигурации маршрута:

nmr0AktuM0RDiaOowU0xlylfkBuGUtxn-pT9

Обратите внимание на это :WhereTheHeckIsThat является переменной, поскольку перед ней стоит двоеточие.

Чего ждать?

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

IoGOuriU8ZoTVqmrnwWef3nBO-Y-PRpduHxy

Вот Да! По сути, это предоставление NoMatch но это также отражение Home View. Почему?

Что ж, происходит то, что в нашем первоначальном шаблоне мы имели a <Перейти /> что подбирал первый <Маршрут /> что соответствует пути, помните?

Поэтому теперь, поскольку у нас нет переключателя, он может соответствовать более чем одному пути одновременно!

Они называются неоднозначными маршрутами. Маршрутизатор отвечал /Домой и в то же время /:WhereTheHeckIsThat потому что это своего рода подстановка, принимающая все.

Как нам это исправить?

Просто: захватить <Перейти /> назад!

kHsKnL4TduMHuJHwGmGcz-91I2wSsoCwAY-L
возвращается, чтобы повернуть нашу карту route.map!
rKSsmATtmMNYywVeLz9U4RVeRUhZjp2Obtd2
Домашняя составляющая была единственным матчем
B1QStJLEuT8-FT-i3dQk9wTybnppVKfjH3hR
Неизвестные пути запускают компонент NoMatch

Как вы можете видеть выше, теперь /Домой подается отдельно, потому что <Перейти /> нашел и немедленно вернул.

Если в URL ввести какой-то неизвестный путь, он инициирует :/WhereTheHeckIsThat и предоставляет NoMatch компонент по умолчанию.

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

Это действительно скрытая ценность наличия абстракции и определения массива конфигурации маршрута!

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

Это конец Руководства автостопщика React Router v4.0!

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

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

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

GitHub Repo

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

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

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

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

Эта статья является частью 4 серии под названием «Руководство автостопом с React Router v4»

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

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

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