Reactjs 从组件提要重定向到单个组件

目标：我有很多不同的艺术品。我想点击其中一件艺术品，并重定向到一个新页面，其中只包含点击艺术品的数据

问题：我如何确保在单击单个艺术品时，我可以重定向到一个新页面，其中只包含单击的艺术品的数据，而不是整个提要的数据

以下是我的

提要

组件中的代码，我在其中查询所有艺术品并将它们渲染到提要中：

函数提要（）{
常数[artworks，setArtworks]=useState（[]）；
useffect（（）=>{
db.收藏（“艺术品”）
.其中（“状态”，“真实”）
.onSnapshot（（快照）=>
setArtworks（snapshot.docs.map（（doc）=>doc.data（））
);
}, []);
返回(
{artworks.map（（艺术品）=>(
))}

这就给了我：

然后，我将道具传递到我的

反馈卡

组件中，如下所示：

function FeedCard({
  imageUrl,
  title,
  artist,
 
}) {

  
  return (
    <div className="feed__card">
        <div className="feed__card__container" onClick={grabArtworkId}>
          <div className="feed__category">
            <img src={imageUrl} className="artwork__image__feed" />
          </div>
          <div className="artwork__info">
            <div className="artwork__title__artist">
              <h1>{title}</h1>
              <p>{artist}</p>
            </div>
            <div className="artwork__bid_button">
              <button>Bid</button>
            </div>
          </div>
        </div>
    </div>

功能反馈卡({
imageUrl，
标题
艺术家，
}) {
返回(
{title}
{艺术家}

投标

现在，当有人单击单个

FeedCard

组件时，我如何将用户重定向到一个新页面，其中只包含从该特定卡片中提取的数据？我正在尝试通过

doc.id

进行链接和查询，但我无法实现这一点

任何帮助都将不胜感激！

我建议使用

您的父组件的最终外观如下所示：

function FeedCard({
  imageUrl,
  title,
  artist,
 
}) {

  
  return (
    <div className="feed__card">
        <div className="feed__card__container" onClick={grabArtworkId}>
          <div className="feed__category">
            <img src={imageUrl} className="artwork__image__feed" />
          </div>
          <div className="artwork__info">
            <div className="artwork__title__artist">
              <h1>{title}</h1>
              <p>{artist}</p>
            </div>
            <div className="artwork__bid_button">
              <button>Bid</button>
            </div>
          </div>
        </div>
    </div>

const-App=（）=>{
返回(
)
};

然后，当有人单击您的

FeedCard

时，您可以使用

history

对象将状态传递给您的

Artwork

组件

history.push({
路径名：'/artwork'，
声明：{
imageUrl，
标题
艺术家，
}
})

可以使用

useHistory

hook访问

---

如果您不希望使用react router，我建议您在父级中有条件地渲染任一组件，类似于我提供的react router代码中的

开关。
当您渲染
反馈卡
组件时，您已经可以访问单个artwork corr的整个
artwork
对象ect？或者你想在这个单独的页面上显示更多的信息。@CoryHarper不，我不需要更多的信息。我只想从一张单独的卡片上获取数据，并将其填充到一个新页面上。现在，它填充我数据库中的所有内容，而不是单个对象。我应该包括历史记录吗。push（）…在FeedCard组件或Feed组件中编码？无论您决定在何处添加
onClick
处理程序。