Как заполнить компоненты на новой странице при нажатии на компонент на текущей странице

javascript #reactjs

#javascript #reactjs

Вопрос:

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

Для справки, это проект, который позволяет пользователям искать рецепты из внешнего API. Миниатюра компонента, на который они будут нажимать, будет изображением и названием рецепта. Когда они нажимают на этот компонент, они будут перенаправлены на страницу с едой, на которой есть компоненты для названия рецепта, изображения, порций, ингредиентов, указаний и т. Д., И Эти компоненты будут отображаться с использованием информации из эскиза с домашней страницы.

Подводя итог, вот что я хочу сделать: когда я нажимаю на рецепт на домашней странице, я хочу, чтобы меня перенаправили на страницу, на которой отображается информация о рецепте, на который я нажал.

Итак, мой главный вопрос: «Возможно ли это?»

Спасибо и не стесняйтесь, дайте мне знать, если вам нужна дополнительная информация.

1. Это очень возможно. Это звучит как обычная веб-страница, и я думаю, что большинство руководств по React на YouTube помогут вам достичь этого.

2. Для меня это звучит так, как будто вы получаете все данные из своего API в огромном запросе для вашего списка эскизов. Вероятно, было бы лучше получить «сведения о еде», когда они вам действительно понадобятся (перед загрузкой вашего компонента). Если для вас это невозможно, мы говорим о хранении данных между компонентами, что является другим вопросом. Может быть, сначала проясните это

Ответ №1:

Для достижения этого вам, вероятно, следует использовать пакет с именем ‘react-router-dom’.

Вы должны настроить react-маршрутизатор. Вот документы для этого.

 <Route path="/recipe/:id">
  <RecipePage />
</Route>

Ваш эскиз должен перейти на страницу рецепта с указанным идентификатором.
Вы должны извлекать данные рецепта из API:

 // Recipe page  

import { useHistory, useParams } from 'react-router-dom'


const { id } = useParams()
const recipe = await fetch('api/recipe/'   id)