如何将查询参数传递给 ReactJS 中的另一个组件？答案

【问题标题】：How to pass query parameters to another component in ReactJS?如何将查询参数传递给 ReactJS 中的另一个组件？
【发布时间】：2020-07-29 06:36:02
【问题描述】：

React 相对较新，尤其是路由（使用任何框架），所以如果这是一个简单的修复，请原谅我。

我试图在单击父/其他组件上的按钮时路由到另一个 React 组件。这些按钮代表房间号，我想将我点击的房间号的数据传递给另一个组件，该组件将使用该信息启动查询。

我很难将数据传递给组件，然后从那里启动查询。我可以检测到正在按下的按钮。

我该如何解决这个问题？希望得到任何指点，最重要的是感谢您的宝贵时间。

【问题讨论】：

【解决方案1】：

history.push 应该将id 作为 URL 参数推送。不作为查询参数。

this.props.history.push(`/RoomTiles/${this.buttonClicked}`);

而 int RoomTiles 组件，您可以使用 useParams 来读取参数。

const RoomTiles = (props) => {
  let { roomId } = useParams();
  return <div>Now in {roomId}</div>;
}

useParams 的文档在这里：

https://reactrouter.com/web/api/Hooks/useparams

【讨论】：

嘿，尝试使用简单的Component 而不是通过render 函数传递它。 <Route path="/RoomTiles/:id" component={RoomTiles} /> .
是的。您可以使用fetch("localhost:5000/ByRoom?roomNo="+roomID) 获取。这种方式将roomNo 作为查询参数传递。另一种方法是通过 URL 参数传递。看起来像fetch("localhost:5000/ByRoom/"+roomID)。另一边的服务器应该根据你的通过方式读取。希望您了解查询参数和 URL 参数之间的区别。
@panditmonium - 请求投票并将其标记为正确答案。
嘿 Vasanth，听起来不错！感谢您的帮助，我会尝试一下。我已将其标记为正确答案。

【解决方案2】：

在您的路由定义中，您期望 id 作为路径参数，但在 handleClick 代码中，您将其定义为查询参数。所以你需要改变你的路径生成逻辑如下。

this.props.history.push("/RoomTiles/" + this.buttonClicked);

更新

由于您没有将任何自定义 props 从 App.js 传递到 RoomTiles 组件，因此您可以简单地定义 Route，如下所示。

<Route path="/RoomTiles/:id" component={RoomTiles}/>

【讨论】：