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

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

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

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

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

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

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

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

Матч

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• history.push(locationX)

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

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

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

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

История

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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

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

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

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