Вообщем преамбула следующая, есть страница с каталогом карточек. Нужно на этой страницы по клику на карточку открыть эту карточку на другой странице.

Вот есть уже готовый код, но я не могу понять, как он работает. Примерно такую же задачу делал, но через Context API, но оказывается можно сделать по другому.

Самая страница, которая отвечает за вывод карточки:

Здесь меня во-первых меня заинтересовал странный вариант объявления пропсов:

Я правильно понимаю, что в props у нас попадает только id назначенный константой через деструктуризацию. А mockPockemon и stats мы создаем только для того, чтобы использовать в самом компоненте или все-таки они тоже каким-то образом появляются в пропсах?

Компонент самой карточки, которая отображается на странице каталога карточек:

Вот здесь я так понимаю все что назначено через деструктуризацию попадает в пропсы, так как pokemon присваивается в props. Помимо этого мы еще добовляем событие onCardClick повешеное на style.root.

Страница где выводится каталог карточек:

Все что связано с поиском по карточкам меня не интересует. Меня интересует, как работает именно передача карточки на страницу Pokemon.

Я вижу, что мы мапой проходимся по parsedPokemons в котором у нас лежат данные и выводим их компонентом PokemonCard.

Так же мы из пропсов PokemonCard вызываем пропс onCardClick и через стрелочную функцию вызываем handleCardClick, который у нас объявлен в этом компоненте, который нас перекидывает на страницу Pokemon. Хорошо он нас перекинул - в хендлере вижу только формирование страницы host/pokemon/id и переброс на страницу, а как сам вывод карточки покемона осущевстляется на самой странице? По моей логике туда тоже должна прийти тогда дата из апишки из которой мы по id допустим делаем вывод, но я не вижу, чтобы туда дата приходила, кроме приходящего id больше ничего не вижу, может я чего-то не догоняю.

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