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

Question

Relatively new to React, and especially to Routing (with any framework) so please forgive me if this is a simple fix.

I'm trying to route to another React component upon the click of a button on the parent/other component. The buttons represent Room numbers, and I want to pass the data of what room number I clicked to another component that will use that information to launch a query.

I'm having difficulty with passing data to the component, and then from there launching the query. I can detect what button is being pressed.

How can I fix this? Would love any pointers, and above all thank you for your time.

Answer 1

In your route definition, you are expecting id as a path parameter, but in the handleClick code you are defining it as a query parameter. So you need to change your path generation logic as below.

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

---

Updated

Since you are not passing any custom props from the App.js to the RoomTiles component, you can simply define the Route as follows.

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

Answer 2

The history.push should push the id as a URL param. Not as a query param.

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

And int RoomTiles component, you could use useParams to read the param.

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

Documentation of useParams here:

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