如何在反应中使用URL参数？

Question

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

在homepage.js xPOgk21523aqPW=room.id中

Homepage.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>

Player.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作为state。我该怎么做？

Answer 1

最简单的方法是使用带有动态路径的react-router-dom：

然后，您将能够通过使用UseParams钩子访问id：

const{id}=useParams（）

文件：https://reactrouter.com/web/example/url-params