[match, location, history] – твои лучшие друзья!

match location history – tvoi luchshie druzya?v=1656547938

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

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

Что произойдет, если вы попадете в код своего домашнего компонента и вставьте a console.log там проверить реквизит?

nHKRAkDljCjDcqgGQ5MbtVorvtcnAddzIdDb
console.log(props) внутри компонента

Маршрутизатор вводит в ваш компонент следующие объекты:

6LMI81YyC97GbgkqkALwuHgL9gRWruaxhF6u
console.log(props) приведет к консоли Chrome

Вот Да! Откуда это взялось? ?

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

Так почему они там и как я могу из них использовать? ?

Они будут вашими лучшими друзьями! Доверься мне! ?

Матч

The матч объект содержит информацию о том, как a <Шлях маршруту> соответствует URL-адресу.

  • параметры: (объект), пары ключ/значение, разобраны с URL-адреса, соответствующего динамическим сегментам пути
  • является точным: (логическое значение), истина, если совпадает весь URL-адрес (без символов в конце)
  • путь: (строка), шаблон пути, используемый для соответствия. Полезно для построения вложенных маршрутов. Мы рассмотрим это позже в одной из следующих статей.
  • url: (строка), соответствующая часть URL-адреса. Полезно для создания вложенных ссылок.

Да у Домой компонент мы имеем это матч объект:

uHh5Y5m7cDC7jIR7H7n8py4nDU2ffGdhjKAt
соответствовать объекту внутри Home Component

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

Теперь давайте посмотрим на Просмотр списка тем:

b8EZtA2VpFlxdsLyycjIWhoX9JRh1o5usrPs
Список тем Просмотреть код
xddWSXptrwdcsqjl9iIZuZlWIP7QOfI5lyg2
console.log(match) внутри просмотра TopicList

Пока ничего нового, та же история, что и в Home Viewпоказывая путь и url с Список тем.

Но что, если мы посмотрим Подробности темы?

7HqUri6J58zzX0A2Ibee8gG44OdjhDQkhXNo
Подробности темы
wpl-oFxuzOEW2DNVAuFd-ShAK-yLTZ8xj0xb
console.log(match) внутри TopicDetails

Хорошо, что мы здесь имеем?

является точным продолжает оставаться правдой, поскольку совпадает весь URL-адрес. параметры объект приносит topicId информация, которая была передана в компонент.

0xEFd2yRpU30Zkh4Wdd5NpZJjcpsngQPKFyB
Маршрут для компонента TopicDetail в routes.js

Обратите внимание на то, как topicId является переменной.

Но где это предполагает Тема 1 значение?

Просто, вы вызываете его явным образом Ссылки на список тем.

Проверьте, как мы использовали матч для Список тем чтобы узнать его URL.

v2DiZPFGU7SdipLFW56Ojtz2R2Xi8hmPxqYA

Эта ссылка может быть динамический. Позже мы приведем пример, где вы Ссылки к относительному пути, где вы раньше не знаете, есть ли он Тема 1 или Тема3520.

Но…

В какой ситуации находится является точным ошибочный?

Ну… позвольте привести вам пример:

tBPCHxskUCJOaLM3o7qKXPkTyFUE4fSIMr1d
Это точный ложный пример

В этой ситуации мы ввели /HelloWorldSection в URL-адрес браузера.

Случается то, что маршрутизатор не знает полного пути к HelloWorldSection итак, он направляет вас туда, куда знает путь.

является точным показывает ложь, говоря вам о том, что «не совпадает весь URL-адрес”.

Это очень полезно, как вы увидите, как только начнете делать СПА с помощью RRv4!

Чтобы завершить наш подход к матч зацены:

nYP-RV9WCaUtjbnurwmOgO6XXTMqLCx4iDMH
Код подробностей темы

Мы использовали match.params.topicId напечатать на экране название нашей темы.

Это одно из самых распространенных приложений для матч.

Конечно, он имеет множество приложений. Предположим, нам нужно получить API с этим topicId информации. ?

Местонахождение

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

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

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

Давайте console.log (размещение) внутри Home View:

ZH7dpyNWt8oOe4L0AbF - pLAysezPkJlJAqg
console.log(location) внутри Home View

Давайте не будем глубоко погружаться и продлим его простую функциональность.

Вы имеете имя пути ключ/значение.

Вы можете использовать его, например, для проверки или имя пути изменилось:

Fs8NVjFmantqRIJqxNK6ekxDVUFDxUx5ZTIH
использование расположения внутри метода жизненного цикла componentDidUpdate()

Ты можешь <Посилання/> или <Переадресація /> к нему. Вы можете сделать history.push или history.replace, как мы увидим позже.

H3q-WXDs49wRkMD4KbsQorU4FMS6R2lN1C75

Вы можете создать собственный объект и использовать его

  • history.push(locationX)

Вы также можете передать его <Маршрут/> и <Перейти /> компонентов.

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

Достаточное расположение сейчас…

Переходим к истории!

История

The истории Объект позволяет управлять и обрабатывать историю браузера в ваших представлениях или компонентах.

  • длина: (число), количество записей в стеке истории
  • действия: (строка), текущее действие (PUSH, REPLACE или POP)
  • Местонахождение: (объект), текущее расположение
  • push (путь, [state]): (функция), толкает новую запись к стеку истории
  • заменить (путь, [state]): (функция), заменяет текущую запись в стеке истории
  • идти (n): (функция), перемещает указатель в стеке истории на n записей
  • Возвращайся(): (функция), эквивалент go(-1)
  • идти вперед(): (функция,) эквивалент go(1)
  • блокировать (подсказка): (функция), предотвращает навигацию

Итак, давайте console.log истории объект в нашем Home View и посмотрите, что он показывает:

TlxBJpus9XCfVoTXpuwlYpMIJdSuDQ6AlzuA
console.log(history) внутри Home View

Хорошо именно то, чего мы ожидали.

Это говорит нам, что мы прибыли сюда с a PUSH действия, что длина объекта есть 40 (во время навигации по приложению истории вырастает до 50 и останавливается на этом, отбрасывая старые записи и сохраняя его размер всякий раз, когда программа посылает другую запись истории в объект).

Это дает нам Местонахождение информации.

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

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

Например:

11tFGOkM-0hm2n6rF3Mn3bxqFCC87kJeXkUU
пример использования местоположения, правильного и неправильного

Обычно вы можете использовать его для изменения пути URL браузера.

В следующем примере мы избегаем <Посилання> и создайте кнопку, которая нажимает историю:

U6XKE1UjV-vBx5xUen3qRdxP-iO-olkPAmN3
пример использования history.push

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

Его удобно использовать внутри JSX, где вы не хотите вызвать компоненты. Можно просто вернуться а толчок истории и триггер Маршрутизатор к обновление URL-адрес браузера.

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

Я думаю, что к этому времени у вас уже есть хорошее представление о том, как использовать матч, Местонахождение и истории.

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

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

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

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

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

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

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

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