рекурсивные пути, до бесконечности и дальше!

rekursivnye puti do beskonechnosti i dalshe?v=1656544453

Добро пожаловать в третью часть Руководства автостопом с React Router v4. В этой статье мы сосредоточимся на рекурсивных путях. Если вы пропустили две первые части, вы можете найти часть 1 здесь, а часть 2 здесь.

Что такое рекурсивный путь?

Рекурсивные пути — это не что иное, как пути, состоящие из вложенных маршрутов, отражающих один и тот же компонент для отображения вложенных представлений.

пример: http://evedes.rockz/Topics/1/2/3/2/1

Он обычно используется для создания «хлебных крошек» на веб-сайтах — шаблона навигации, который показывает, где находится пользователь в органической структуре сайта, дереве отношений в социальной сети, решает много сложных задач с графиками, анализирует или отслеживает любую информацию, зависящей от последнего пути. Это может быть, например, в случае компьютерной игры, когда вы переходите из одной комнаты в другую, и по какой-то причине следует отследить путь, который вы прошли, чтобы туда добраться.

Взволнованный? Скажи «да»! ?

Итак, давайте внесем некоторые изменения в наше приложение, чтобы проверить этот шаблон, примененный в React Router v4.

Цель

Следовательно, идея состоит в том, чтобы изменить наш список тем.

Вместо того, чтобы иметь список соответствующих тем, которые пользователь может перейти к каждой детали темы и вернуться назад (см. в части I настоящего руководства), давайте создадим вложенный маршрут, начинающийся с темы 1 и показывающий пользователю, которая темы связана с ею — показывая список ссылок, которые можно нажать, чтобы перейти к следующей теме. Каждый раз, когда вы выбираете тему, вы можете перейти к ней, просмотреть ее детали и увидеть, какие темы связаны с ней.

routes.js

olKeKVQse2SAHuFm3EhWOXHR58bT0sBPsD6Z
routes.js

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

Оба будут отображать один и тот же компонент с разными свойствами соответствия.

TopicList.js

Кроме небольшой поправки выше, я сильно переделал TopicList.js файл. Давайте посмотрим, что мы там имеем:

TjrHUIdtieZDPOCHLv3e4us0G7OaHyMgRs68
рис 1.-Импорт и константные определения

Мы импортировали Маршрут и Ссылки от react-router-dom пакет, потому что мы собираемся вызвать его позже в коде.

Мы создали массив объектов, содержащий список тем. Каждая тема имеет а связанные темы массив, способствующий взаимоотношениям между ними.

Мы создали a Найти функция, получающая идентификатор темы как аргумент и возвращающая элемент или тему, однозначно соответствующую переданному в нее идентификатору.

The parseInt(id, 10) использование гарантирует, что даже если аргумент передается в Найти функция является строчкой, она становится целым числом по основанию 10 (десятичная система счисления).

Обратите внимание, что наши темы id и связанные темы значение являются примитивными целыми числами.

Чтобы узнать больше о parseInt посмотрите ЗДЕСЬ.

bd3vrUgWPZrDDw7o2WsuOO14as9VFlHS4Jqs
fig.2-TopicDetail Компонент без состояния

Компонент Подробности темы начинается с определения переменной тема. Это сохранит результат функции Найти который захватывает id что происходит от матч объект (маршрутизатор), когда компонент вызывается. Затем он возвращает тема объект что соответствует этому id.

С этим тема сохраненный объект, он возвращает Подробности темы и создает динамический неупорядоченный список со связанными темами id и имя.

Давайте посмотрим это в браузере:

3xH6KmVJ6-OZkNAZBBABE65iZ8ViYFr784Ab
Детали темы 1 (информация и связанные темы)

Хорошо! Это работает!

Итак, когда вы щелкните одну из ссылок, которые показаны, вы перейдете к следующей теме id:

JEBsBuYFBBdKTMjr0NjHe3RMNYjGPhDxaNzu
Маршрут для вызова внутри компонента TopicDetail

Вот Да! Этот маршрут находится за пределами routes.js файл! Это новое. Обратите внимание, что технически можно создать маршруты внутри любого компонента.

Не забывайте об этом является точным является ошибочным, поскольку url не полностью соответствует пути от /Темы/:topicId как было определено ранее в routes.js компонент.

tubC6XVUSQmFdxIu7-QmfYcqaZnM4QYrYXj2
рис.3-TopicList компонент без состояния

В конце концов мы определяем и экспортируем Список тем компонент, вызывающий Подробности темы с объектом соответствия выше. Но, как и в любом случае Подробности темы когда вы запускаете a Маршрут, Подробности темы повторно воспроизводится с помощью нового матч свойства, предоставленные Маршрутизатор в любом случае.

Итак, мы кончили! ?

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

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

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

Изменения, которые я внес в программу создания этой статьи, можно найти в моем репозитории GitHub.

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

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

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

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

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

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

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