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

Question

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

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

总结一下，下面是我想要做的:当我在主页上点击一个食谱时，我希望被重定向到一个显示我点击的食谱信息的页面。

所以我的主要问题是"这可能吗?"'谢谢，如果你需要更多的信息，请告诉我。

Answer 1

要做到这一点，你可能应该使用一个名为'react-router-dom'的包。

1. 你应该设置一个react-router。这里是文档。

<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)