React Router - 如何将特定于产品的 API 数据加载到它自己的页面/URL 中？

Question

这是我第一次用React解决这个问题，请耐心等待！我想完成以下任务：

• 当用户点击产品时，它会加载包含特定信息(图像、描述等(的产品链接
• 该URL类似于"myapp.com/product#/">

API数据实际上以JSON的形式包含在本地db.JSON文件中，并包含我想要获取的每个产品的所有信息。我使用Context API来管理数据。

这是一个现场演示和完整的项目代码。

这就是我目前所拥有的：

export default function MachineCard({ image, title }) {
return (
<>
<div className="col-lg-3">
<div className="card">
<Link to="/details"> <-- want this to link to product-specific page
<img className="img-fluid" src={image} alt={title} />
<div className="title">
<h2>{title}</h2>
</div>
</Link>
</div>
</div>
</>
);
}

知道我该怎么做吗？

如有任何帮助，我们将不胜感激！

Answer 1

在react router中，有一个以这种方式进行/：id的选项，它会拾取并呈现正确的产品或页面。我已经分叉了你的演示，我已经添加了解决方案，看看它，让我知道它是否有帮助。https://codesandbox.io/s/nce-forked-nizd5?file=/src/components/MachineCard.js

此外，请查看此react路由器文档，它将对您有很大帮助。https://reactrouter.com/web/example/url-params