如何在 React 中使用 URL 参数？

Question

在我的项目中，当我只需单击主页上的 'join room' 按钮时，它会将我定向到一个特定的房间。所以以房间号为例；它发生在 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作为状态。我该怎么做？

Answer 1

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

<Switch><Route path="/room/:id" children={} /></Switch>

然后您就可以使用 UseParams 挂钩访问该 ID:

const { id } = useParams();

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

如何在 React 中使用 URL 参数？

How to Use URL Parameters in React?

javascript

url

routes

reactjs