React - How to navigate using a custom component instead of react-router-dom-CodePudding

I have a rooms list that I iterate, rendering the different rooms like this:

<Room room={room} key={room.id}/>

I want each room to redirect to their corresponding path (/rooms/:id). The only way of redirecting elements is via react-router-dom but I feel there must be a better way of achieving redirection in this case.

CodePudding user response：

React router works fine, only thing you need is pass id to link

<Route path="/RoomsList/:roomId" element={<RoomCard/>}/>

in RoomCard you use hook

const {roomId} = useParams();

and change the component depending on the id.