如何使用组件类中的 react-router 链接来使用组件中的数据？

Question

我有一个卡片轮播。每张卡片都有一些数据，如果我点击卡片上的按钮。我想在不同页面上的不同组件中呈现该特定卡片的详细信息，即 item-details。

如何在类组件中实现这一点？地图中有一个 ID，我可以在我尝试呈现卡片的完整详细信息的详细信息页面中使用该 ID 发送。

                        {this.state.data.map((item, idx) => {
                            return (
                                <div key={`edth_${idx}`} className="col-12 col-sm-6 col-lg-4 item explore-item" data-groups={item.group}>
                                    <div className="card">
                                        <div className="image-over">
                                                 <img className="card-img-top" src={item.img} alt="" />
                                         </div>
                                         <div className="card-caption col-12 p-0">
                                             <div className="card-body">
                                                <a href="/item-details">
                                                    <h5 className="mb-0">{item.title}</h5>
                                                </a>
                                                
                                                <div className="card-bottom d-flex justify-content-between">
                                                    <span>{item.price}</span>
                                                    <span>{item.count}</span>
                                                </div>
                                                <Link to={{pathname: '/item-details',state: [{img:'item.img',count: 'item.count', title: 'item.title', price: 'item.price'}]}} className="btn btn-bordered-white btn-smaller mt-3"> <i className="icon-handbag mr-2" />Check it out</Link>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>

我已经添加了来自 react 路由器的链接，但我仍然不知道如何在 /item-details 中的组件中使用它。

发现我可以在类组件中使用路由器而不是 useLocation，所以...

在 item-details 页面中导入 useRouter 并在 render() 中像这样使用：

render() {
        const { location } = this.props;
                return (
                            <div className="item-info">
                                {location && location.img && <div className="item-thumb text-center">
                                    <img src={location.img}  />
                                </div>}
);

通过这样做，我没有收到任何错误。但是img没有显示。

Answer 1

React 通常用于单页应用程序（即您不会将用户发送到不同的 URL），除非您使用 NEXT、React Router 等来处理不同的页面。

您无需将用户发送到另一个页面，而是渲染一个新组件，其中包含作为道具发送的详细信息。

但是，如果您询问如何将信息从一个组件发送到另一个页面，我建议您查看 React Router，它旨在执行此操作。

我不确定这是否真的是您要问的，所以请提供有关您的项目由什么组成的更多详细信息。

Answer 2

根据我的经验，处理此问题的最佳方法是在 onClick() 处理程序运行时设置 URL 查询。视图将更新，并根据需要获取详细信息。这样，如果您的主页是 mysite.com，您可以访问 mysite.com/moreinfo 获取更多详细信息。

为此，您可以使用 react-router-dom 历史 API：

import { useHistory } from "react-router-dom";

function myComponent() {
  let history = useHistory();

  function handleClick() {
    history.push("/moreinfo");
  }

  return (
    <button type="button" onClick={handleClick}>
      View More Info
    </button>
  );
}