How to Use URL Parameters in React?

  javascript, reactjs, routes, url

In my project, when I simply click the ‘join room’ button on the home page, it directs me to a specific room. So the room number as an example; It happens xPOgk21523aqPW and it does this with an extension like localhost: 3000 / room / xPOgk21523aqPW. When I make this redirect, the name of the component I am in is Player. What I want is to be able to use the code ‘xPOgk21523aqPW’ in Player.js as a variable when I redirect Homapage.js to Player.js. So every time I redirect, I try to do this by separating the url while the component opens. I tried to transfer data from the component to another component, but for this I could not set up my project on a proper system basis. So how can I apply this method?

In homepage.js xPOgk21523aqPW =


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


class Player extends Component {
    const params = this.getHashParams(); 
    let {id} = useParams();
    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);

All I want is to separate this url in the constructor and assign the xPOgk21523aqPW code to roomId as state. How can I do that?

Source: Ask Javascript Questions