Автор оригинала: Eduardo Vedes.
Добро пожаловать в третью часть Руководства Hitchhiker для React Router V4. В этой статье мы собираемся сосредоточиться на рекурсивных путях. Если вы пропустили первые две части, вы можете найти часть 1 здесь и часть 2 здесь.
Что такое рекурсивные пути?
Рекурсивные пути – это не что иное, как пути, которые состоят из вложенных маршрутов, которые представляют собой тот же компонент, чтобы показать вложенные виды.
Пример: http://evedes.rockz/topics/1/2/3/2/1.
Обычно используется для выполнения «нисходов» на веб-сайтах – шаблон навигации, который показывает, где пользователь находится в органической структуре сайта, дерево со социальной сетью друзей, решить множество сложных графов, аналитиков или проследить любую информацию, которая зависит от последнего пути. Это может быть так, например, компьютерной игры, в которой вы идете из одной комнаты на другую и путь, который вы взяли, чтобы получить, нужно отслеживать по какой-то причине.
В восторге? Скажи да”! ?
Итак, давайте сделаем некоторые изменения в нашем применении для проверки этого шаблона, применяемого в React Router V4.
Цель
Итак, идея здесь – преобразовать нашу тему.
Вместо того, чтобы иметь список тем, которые сопоставляются и что пользователь может перейти к деталям и увидеть каждую тему и вернуться (видно в Часть Я Данного руководства) Давайте сделаем вложенный маршрут, который начинается в теме 1 и показывает пользователь, темы, связанные с ним – путем отображения списка ссылок, которые можно нажимать, чтобы перейти к следующей связанной теме детализации. Каждый раз, когда вы выбираете тему, вы можете перейти к нему, увидеть его детали и посмотреть, какие темы связаны с ним.
Маршруты
Так в Маршруты Мы удалили импорт TopicDetails компонент и исправил маршруты для рендеринга Topiclist Компонент, когда путь – это /Темы/: Topicid , помимо существующих Маршрут к /Темы .
Оба дадут один и тот же компонент с различными свойствами совпадения.
Topiclist.js.
Помимо небольшой коррекции выше, я тяжело эксплуатировал Topiclist.js файл. Давайте посмотрим на то, что у нас там есть:
Мы импортировали Маршрут и Ссылка от React-Router-DOM Пакет, потому что мы собираемся вызвать его позже в коде.
Мы создали массив объектов, которые содержат список тем. Каждая тема имеет ContryTopics массив, который способствует отношениям среди них.
Мы создали Найти Функция, которая принимает идентификатор темы в качестве аргумента и возвращает элемент или тему, которая однозначно соответствует, переданному мнению ID.
Parсент (ID, 10) Использование гарантирует, что даже если аргумент передан в Найти Функция – это строка, она становится целым числом на базе 10 (система десятичной числи).
Соблюдайте, что наши темы ID и ContryTopics Значения являются примитивными целыми числами.
Чтобы узнать больше о Парсент посмотрите Здесь Отказ
Компонент TopicDetail начинается с определения переменной тема . Это будет хранить результат функции Найти который хватает ID Это происходит от Матч Объект (маршрутизатор), когда вызывается компонент. Затем он возвращает Тема объект это соответствует этому ID Отказ
С этим Тема Объект хранится, он возвращает Детали темы и создает динамический неупорядоченный список со связанными темами ID и имя .
Давайте посмотрим в браузере:
Отлично! Работает!
Итак, когда вы нажимаете одну из показанных ссылок, он направляет вас к следующей теме ID :
Ух ты! Этот маршрут за пределами Marross.js файл! Это новая. Соблюдайте, что технически вы можете создавать маршруты внутри любого компонента.
Не забывайте, что Isexact неверно потому что URL Не совсем соответствует пути от /Темы/: Topicid Как ранее определено в Маршруты составная часть.
В конце концов, мы определяем и экспортируем Topiclist Компонент, который вызывает TopicDetail с объектом матча выше. Но, Как в каждом случае TopicDetails Когда вы запускаете Маршрут , TopicDetail восстанавливается с новым Матч Свойства, поставляемые Маршрутизатор на каждом экземпляре.
Так что теперь мы закончили! ?
Последний, но тем не менее важный
Я думаю, что к этому времени у вас уже есть хорошая идея о том, как начать реализацию рекурсивных маршрутов.
Я выбрал этот пример, потому что это легко понять и очень полезно для некоторых основных материалов.
Изменения, которые я сделал в приложение, для создания этой статьи можно найти в моем Github репо Отказ
Библиография
Чтобы сделать эту статью, я использовал документацию React Router, которую вы можете найти здесь Отказ
Все остальные сайты, которые я использовал, связаны в документе, чтобы добавить информацию или предоставить контекст к тому, что я пытался вам объяснить.
Эта статья является частью 3 ряда серии под названием «Руководство автостона для React Router V4»
- Часть I: Grok React Recter в 20 минут
- Часть II: [Матч, местоположение, история] – ваши лучшие друзья!
- Часть IV: Конфигурация маршрута, скрытое значение определения массива конфигурации маршрута
? Большое спасибо!
Оригинал: “https://www.freecodecamp.org/news/hitchhikers-guide-to-react-router-v4-21c99a878bf8/”