Посібник автостопа по React Router v4: [матч, розташування, історія] - ваші найкращі друзі!

Гей! Ласкаво просимо до Посібника автостопа по React Router v4, частина II!

Тепер, коли ми налаштували рух м’яча за допомогою нашого першого маленького додатка, зосередимось на твоїх трьох товаришах по подорожах: матчі , розташуванні та історії .

Що станеться, якщо ви потрапите всередину коду домашнього компонента і розмістите там console.log для перевірки реквізиту?

Маршрутизатор вводить у ваш компонент такі об’єкти:

Оце Так! Звідки це взялося? ?

Ну, кожен вигляд, компонент або все, що обгорнуто маршрутизатором, має ці об’єкти. виконує свою роботу як компонент вищого порядку, обгортає ваші компоненти або подання та вводить ці три об’єкти як реквізит всередину них.

Тож ... навіщо вони там і яка користь від них? ?

Вони будуть твоїми найкращими друзями! Довірся мені! ?

Матч

Об'єкт збігу містить інформацію про те, як a відповідає URL-адресі.

  • params : (об'єкт), пари ключ / значення, проаналізовані за URL-адресою, що відповідає динамічним сегментам шляху
  • isExact : (boolean), істина, якщо відповідала вся URL-адреса (без кінцевих символів)
  • path : (рядок), шаблон шляху, який використовується для збігу. Корисно для побудови вкладених маршрутів . Ми розглянемо це пізніше в одній із наступних статей.
  • url : (рядок), відповідна частина URL-адреси. Корисно для побудови вкладених посилань.

Отже, у компоненті Home ми маємо такий об’єкт збігу :

isExact є істинним, оскільки зіставлена ​​вся URL-адреса, об’єкт params порожній, тому що ми нічого в нього не передали, значення шляху та url- ключа рівні, що підтверджує істинність isExact .

Тепер давайте поглянемо на TopicList View :

Нічого нового досі така ж історія , як і в головному View , показуючи шлях і URL з TopicList .

Але що, якщо ми поглянемо на TopicDetails ?

Гаразд, що у нас тут?

isExact продовжує залишатися істинним, тому що збігалася вся URL-адреса. Об'єкт params приносить інформацію topicId , передану в компонент.

Зверніть увагу на те, як topicId є змінною.

Але де воно приймає значення Topic1 ?

Просто, ви використовуєте це явним чином у TopicList Links .

Перевірте, як ми використовували збіг для TopicList, щоб дізнатися його URL-адресу.

Це посилання може бути динамічним . В подальшому ми зробимо приклад , коли ви посилання на відносний шлях , де ви не знаєте раніше , якщо це Topic1 або Topic3520 .

Але ...

У якій ситуації isExact хибний?

Ну ... дозвольте навести вам приклад:

У цій ситуації ми ввели / HelloWorldSection в URL-адресу браузера.

Що трапляється, так це те, що маршрутизатор не знає повного шляху до розділу HelloWorldSection, тому направляє вас туди, куди не знає шлях.

isExact показує помилкове повідомлення, вказуючи саме на те, що " не вдалося збігти всю URL-адресу ".

Це дуже корисно, як ви побачите, як тільки ви почнете робити СПА з RRv4!

Щоб закінчити наш підхід до матчу, перевірте це:

Ми використали match.params.topicId, щоб надрукувати на екрані назву нашої теми.

Це одне з найпоширеніших звичок до сірників .

Звичайно, він має безліч додатків. Припустимо, нам потрібно отримати API із цією інформацією topicId . ?

Розташування

Об'єкт розташування відображає, де зараз знаходиться програма, куди ви хочете перейти або навіть там, де вона була.

Це також можна знайти на history.location, але ви не повинні цим користуватися, оскільки воно змінюється.

Місцезнаходження об'єкта ніколи не мутують , так що ви можете використовувати його протягом життєвого циклу гачками , щоб визначити , коли навігація відбувається. Це дійсно корисно для отримання даних або побічних ефектів DOM .

Давайте console.log (розташування) всередині Домашнього перегляду :

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

У вас є ключ / значення імені шляху .

Ви можете використовувати його, наприклад, щоб перевірити, чи змінилася назва шляху :

Ти можеш або до нього. Ви можете зробити history.push або history.replace, як ми побачимо пізніше.

Ви можете створити власний об'єкт і використовувати його

  • history.push (locationX)

Ви також можете передати його в і компоненти.

Це не дозволить їм використовувати фактичне розташування в стані маршрутизатора. Можливо, ви хочете обдурити компонент, щоб він відтворився в іншому місці, ніж справжній?

Досить місця…

Переходимо до історії !

Історія

Об'єкт історії дозволяє вам керувати історією браузера та обробляти її у ваших представленнях або компонентах.

  • length : (число), кількість записів у стеку історії
  • action : (рядок), поточна дія (PUSH, REPLACE або POP)
  • location : (об'єкт), поточне місцезнаходження
  • push (шлях, [стан]) : (функція), висуває новий запис у стек історії
  • replace (шлях, [стан]) : (функція), замінює поточний запис у стеці історії
  • go (n) : (функція), переміщує покажчик у стеку історії на n записів
  • goBack () : (функція), еквівалентно go (-1)
  • goForward () : (функція,) еквівалентно go (1)
  • блок (підказка) : (функція), перешкоджає навігації

Тож давайте console.log об’єкт історії у нашому Домашньому поданні та подивимось, що він показує:

Гаразд, саме те, що ми очікували.

Це повідомляє нам, що ми прибули сюди з дією PUSH , що довжина об’єкта становить 40 (коли ви переходите через історію додатків, вона зростає до 50 і зупиняється на ній, відкидаючи старі записи та зберігаючи його розмір кожного разу, коли програма натискає черговий запис історії в об’єкт).

Це дає нам інформацію про місцезнаходження .

Знову ж таки, об’єкт історії можна змінювати . Тому рекомендується , щоб отримати доступ до розташування від візуалізації реквізиту маршруту , а не з history.location .

Це гарантує, що ваші припущення щодо React є правильними в гачках життєвого циклу.

Наприклад:

Зазвичай ви можете використовувати його для зміни шляху URL-адреси браузера.

У наведеному нижче прикладі ми уникаємо і створіть кнопку, яка робить історію натисканням:

Звичайно, ви можете використовувати його, щоб викликати зміну URL-адреси після отримання даних або побічних ефектів.

Це зручно використовувати в середині JSX, де ви не хочете викликати компоненти. Ви можете просто повернутися до історії поштовх і запуску маршрутизатора , щоб оновити файл браузера URL.

Останнє, але не менш важливе

Я думаю, що на цей час у вас вже є гарна ідея про те, як використовувати матч , місце розташування та історію .

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

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

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

Усі інші сайти, якими я користувався, пов’язані разом із документом, щоб додати інформацію або надати контекст тому, що я намагався пояснити вам.

Ця стаття є частиною 2 серії під назвою “Посібник автостопа по реагуванню на маршрутизатор v4”

  • Частина I: Grok React Router за 20 хвилин
  • Частина III: рекурсивні шляхи, до нескінченності і далі!
  • Частина IV: конфігурація маршруту, приховане значення визначення масиву конфігурації маршруту

? Дуже дякую!