单击当前页面中的组件时如何在新页面上填充组件答案

【问题标题】：How to populate components on a new page when clicking on component in current page单击当前页面中的组件时如何在新页面上填充组件
【发布时间】：2021-12-02 03:25:48
【问题描述】：

我正在 React 中构建一个前端项目，在其中，我希望能够单击主页上的缩略图组件，该组件会将我重定向到另一个页面，该页面根据我点击的缩略图组件。

作为参考，这是一个允许用户从外部 API 搜索食谱的项目。他们将单击的缩略图组件将是食谱的图像和标题。当他们点击该组件时，他们将被重定向到包含食谱名称、图像、份量、配料、说明等组件的膳食页面，并且这些组件将使用主页缩略图中的信息进行呈现。

总而言之，这就是我想要做的事情：当我点击主页中的食谱时，我希望被重定向到显示我点击的食谱信息的页面。

所以我的主要问题是“这可能吗？”

谢谢，如果您需要更多信息，请随时告诉我。

【问题讨论】：

很有可能。这听起来像一个普通的网页，我认为 youtube 上的大多数 React 教程都会帮助你实现这一点。
对我来说，这听起来像是您从 API 中获取所有数据，需要大量的缩略图列表。当您真正需要它们时（在加载组件之前）获取“膳食详细信息”可能会更好。如果这对您来说不可能，我们将讨论跨组件的数据存储，这是一个不同的问题。也许先把它弄清楚

标签： javascript reactjs

【解决方案1】：

要实现这一点，您可能应该使用名为“react-router-dom”的包。

您应该设置一个反应路由器。这是docs。

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

您的缩略图应navigate 指向具有给定 ID 的食谱页面。
您应该从 API 获取配方数据：

// Recipe page  

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


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

【讨论】：

这非常有帮助！感谢您为我指明正确的方向:)