如何在 React 中使用 URL 参数？

在我的项目中，当我只需单击主页上的“加入房间”按钮时，它会将我定向到特定房间。所以以房间号为例；它发生在 xPOgk21523aqPW 并且它通过像 localhost: 3000 / room / xPOgk21523aqPW 这样的扩展来实现。当我进行此重定向时，我所在组件的名称是 Player。当我将 Homapage.js 重定向到 Player.js 时，我想要的是能够使用 Player.js 中的代码“xPOgk21523aqPW”作为变量。所以每次我重定向时，我都会尝试通过在组件打开时分离 url 来做到这一点。我试图将数据从组件传输到另一个组件，但为此我无法在适当的系统基础上设置我的项目。那么我该如何应用这个方法呢？

在 homepage.js xPOgk21523aqPW = room.id

主页.js

 <GridItem
        colStart={"auto"}
        colSpan={[5, null, null, 2, null, null]}
        p={6}
      >
        <Heading as="h1" mb={6}>
            Rooms
            </Heading>
            <Divider orientation="horizontal" />
           {rooms.map((room)=> (
              <ListItem>
              <ListItemText primary={room.roomName} secondary={room.roomInfo}
              />
               {/* <Link to={`/room/${room.id}`}></Link> */}
                <Link to={`/room/${room.id}`}>
                <Button onClick={() => joinRoom(room.id)}>Join Room</Button>
                {/* <Form action='localhost:8888?roomId=' method="post">
                <input type="hidden" name="roomCodeTxt" value=room.id />
                <input type="submit" value="Join Room" />
                </Form> */}      
                </Link>
              </ListItem>))}
       </GridItem>

播放器.js

class Player extends Component {
  constructor(){
    super();
    const params = this.getHashParams(); 
    let {id} = useParams();
    console.log(id);
    this.state = {
      logeedIn : params.access_token ? true : false,
      currentStatus: false,
      roomId: "",
      rooms: {
      roomAdminMail: "",
      roomName: "",
      roomInfo: ""
      }, 
      nowPlaying: {
        artist_name : 'Not Checked',
        song_name: 'Not Checked',
        image: ''
      }
    }
    console.log("Room Id" + this.state.roomId);

我想要的只是在构造函数中分离这个 url，并将 xPOgk21523aqPW 代码分配给 roomId 作为状态。我怎样才能做到这一点？