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

Question

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

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

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

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

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

标签： javascriptreactjs

Answer 1

为此，您可能应该使用名为“react-router-dom”的包。

1. 您应该设置一个反应路由器。这是相关的文档。

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

2. 您的缩略图应导航到具有给定 ID 的食谱页面。
3. 您应该从 API 获取配方数据：

// Recipe page  

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


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