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

Posted 2023-02-22

【中文标题】如何使用组件类中的 react-router 链接来使用组件中的数据？

【英文标题】：How do I consume data from a component where I am passing data using Link of react-router in class Components?

【发布时间】：2021-10-27 03:01:46

【问题描述】：

我有一个卡片轮播。每张卡片都有一些数据，如果我点击卡片上的按钮。我想在不同页面上的不同组件中呈现该特定卡片的详细信息，即 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  />
                                         </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没有显示。

【问题讨论】：

到底是什么问题？

@EmmanuelPonnudurai 当我点击 我想传递项目的按钮时详细信息，如 item.count item.title 到 /item-details 页面。我将在哪里使用我点击的特定卡片的详细信息。我如何做到这一点？

好的。我看到的最简单的方法是，将它们作为 queryParams 传递。类似href="/item-details?count=count&title=titlle"。这也意味着您重定向到的其他页面应该能够使用这些 queryParams 并使用它们。如果您想对此类操作提供丰富的支持，则可以使用 react 路由器库，但这与您的应用程序无关，因为我不知道您的应用程序的完整构成。

有什么问题？路由状态不工作吗？访问location object中接收路由组件的路由状态。

您是否尝试过其他多种访问location 对象的方法？你能分享一下你是如何尝试访问路由状态的吗？我们能看到它是如何被路由器渲染的吗？ ***.com/help/minimal-reproducible-example

【参考方案1】：

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

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

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

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

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【参考方案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>
  );

【讨论】：

我传递的数据怎么样，我如何在类组件中使用它。

我会使用类似 Reacts 的 useEffect 钩子在页面加载时从其源获取数据，而不是传递道具或道具钻孔。我真的不确定你从哪里得到你的数据才能回答这个问题。你能提供更多细节吗？

抱歉刚刚意识到你在使用类，所以等价的应该是 componetDidMount。

@AvinashToppo 如果这回答了您的问题，您能否将其标记为答案？