Автор оригинала: Eduardo Vedes.
Добро пожаловать в Руководство автостопных автомобилей для React Router V4, часть IV!
Теперь, когда мы узнали о рекурсивных маршрутах, давайте вернемся к нашей исходной котельной, чтобы избежать проблем с смешиванием и научиться создавать массив конфигурации маршрута.
Итак, просто чтобы получить немного то, что мы сделали в начале, давайте посмотрим на наш начальный Маршруты.js файл:
Наше Маршруты Компонент возвращает Div с Навкар и а Переключатель где мы определили все маршруты нашего приложения.
Наш первый шаг в этой части 4 будет определять массив маршрутов.
Маршруты массива
Я посмотрел на наши маршруты и создал этот массив, который определяет каждый маршрут и подсчет, который мы имели в нашем приложении.
Отлично! Что теперь?!? ?
Refactor Старые Харкодируемые маршруты
Теперь давайте убраем наши жесткие маршруты и коммутатор!
Ага! До свидания все эти строки кода. Что мы действительно делаем?
Ну, мы отображаем массив карты с помощью обратного вызова ES6 (стрелка FAT), чтобы вернуть абстрактный компонент под названием
Тем временем нам нужно создать этот компонент. Я решил создать его отдельно и импортировать его в Маршруты.js файл.
Хорошо, это
Как реквизит, у нас есть путь и метод рендера, который будет вызывать Route.comPonent. Вы хотите рендерировать (затем переходя в него разбросы, а подпункты, которые он должен знать).
Эти маршруты исходят с массива конфигурации маршрута – получили его? Отлично! ?
Topiclist (подпункта)
Это сказано, давайте сделаем добычу в Topiclist Компонент, поскольку это один приемный подпункты из массива конфигурации маршрута:
Итак, что здесь происходит? Наше Topiclist Теперь импортирует
Это также делает Маршруты. Как над подпундурами и повторяет процесс, сделанный в Маршруты.js файл.
Найдите минутку, чтобы понять это и играть с ним!
Все больше и больше подпункта
Как видите, это работает довольно хорошо. Он абстрагирован, есть разделение опасений.
Что если мы хотели сделать больше подпункта?
Очень просто! Просто продолжайте расти или перепроектировать свои маршруты настроек конфигурации!
Видеть? Маршруты /Темы/: Topicid может быть просто массив, как его родительские маршруты. Но я решил сделать лучше и вызвать функцию, которая вызывает API и возвращает новый массив маршрутов (просто представьте, что это выбирает API?).
Так как мы можем проверить это в приложении?
Давайте поставить console.log внутри TopicDetail Компонент и проверьте, что он получает:
Я вызываю маршруты () в console.log Потому что сейчас этот подставку – это функция! Помнить? Все хорошо! ?
Да, мА! Мы сделали это! Мы получаем маршруты динамически и распространяем их в наши подпункты и компоненты. Это так здорово!
Домашние и неоднозначные маршруты
Ждать! Где наше Двигал Составная часть?
Хорошо, давайте представим это в нашу маршрут конфигурации Array:
Соблюдайте это : WhereTheheckisthat является переменным, потому что она имеет толстой кишкой до нее.
Что мы должны ожидать?
Давайте увидимся в действии:
Ух ты! На самом деле это рендеринг Двигал Но это также рендеринг Домашний вид . Почему?
Ну, что происходит, это то, что в нашей исходной котельной у нас было <Выключатель/> что подбирал первый <Маршрут/> Это соответствует пути, помните?
Так что теперь, как у нас нет коммутатора, он может сопоставить более одного пути за раз!
Они называются неоднозначными маршрутами. Маршрутизатор соответствует /Дом И в то же время /: WHERETHECHECKISTHAT Потому что это своего рода подстановочный знак, который принимает все.
Как нам это исправить?
Простой: хватает <Выключатель/> назад!
Как вы можете видеть выше, теперь /Главная оказывается в одиночестве, потому что <Выключатель/> Нашел его и вернул его немедленно.
Если вы положите неизвестный путь в URL-адрес, он запускает :/WHERETHECHECKISTHAT и делает Двигал компонент как по умолчанию.
Отличная работа! Все работает, как мы ожидали, и теперь у нас есть Мощный конфигурация массива маршрута который позволяет нам иметь много гибкости.
Это действительно скрытое значение имению абстракции и определение массива конфигурации маршрута!
Последний, но тем не менее важный
Это конец Руководства автомата для React Router V4.0!
Есть еще какие-то вещи, чтобы обратить внимание, но я предпочитаю позволить вам глубоко погружаться немного в котлах, которые мы построили и искали, что вам нужно в React Router Веб-сайт .
У меня было так весело делать это руководство, которое я думаю, я собираюсь начать писать все больше и больше:)
Это было хорошо не только потому, что я смог научить вас что-то, но и, потому что я также многому научился в этом процессе.
Github repo.
Изменения, которые я сделал в приложение, чтобы изготовить эту статью, можно найти в моем GitHub репо для части 4.
Библиография
Чтобы сделать эту статью, я использовал документацию React Router, которую вы можете найти здесь Отказ
Все остальные пользователи, которые я использовал, связаны в документе, чтобы добавить информацию или предоставить контекст к тому, что я пытался вам объяснить.
Эта статья является частью 4 серии, называемого «Руководство по автостопищему, чтобы React Router V4»
- Часть I: Grok React Recter в 20 минут
- Часть II: [Матч, местоположение, история] – ваши лучшие друзья!
- Часть III: рекурсивные пути, до бесконечности и за его пределами!
? Большое спасибо!
Оригинал: “https://www.freecodecamp.org/news/hitchhikers-guide-to-react-router-v4-c98c39892399/”