React：当用户点击市场中的一种产品时显示特定的产品数据

Question

我已从 api 获取数据并成功在市场中显示数据。现在，当用户单击一个产品时，它应该打开产品详细信息页面并发送该产品的数据以填充详细信息页面。单击该产品时，我想将一种产品的特定数据从 Api 传递到产品详细信息页面。请帮忙

这是渲染各种产品的代码

const renderitems = currentitems.map((item) => {
        return <div key={item.id} className="col-md-6">
            <div className="listing">
                <div className="listing-thumbnail">
                    <Link to="/listing-details-v1"><img src={ item.images[0]} alt="listing" /></Link>
                            

我如何将点击链接的 id 传递到详细信息页面

                      `

Answer 1

就是这么简单。您将在路由中将产品 id 作为参数传递，并在产品详细信息页面上获取产品 id。

第一步：注册路由

<Route path="/listing-details-v1/:id" ..... />

第 2 步：链接喜欢

<Link to={"/listing-details-v1/" + item.id}><img src={ item.images[0]} alt="listing" /></Link>

第三步：获取商品详情页面组件的参数，如

        import { useParams } from "react-router-dom";
        let { id } = useParams();

Answer 2

您可以使用动态参数创建路由 <Route path="listing-details-v1/:id" ... /> 然后通过链接传递参数 <Link to={`/listing-details-v1/${item.id}`}></Link> 然后您可以在详细信息页面中使用 useParams 挂钩捕获它
const {id} = useParams()