Javascript 如何从一个组件向另一个组件发送数据而不在React中调用该组件？

如何将我在Homepage.js组件中获得的room.id数据发送到Player.js组件？在此之前，我在App.js中使用了PrivateRouter组件。因此，我的工作变得非常困难，因为我不能直接调用组件，而使用链接路由路由

主页.js

 <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>
                Join Room
                </Button>
                </Link>
                
              </ListItem>))}
       </GridItem>

---

我只想将homepage.js中的链接路由到Player.js中的getRoomInfo函数时使用的room.id发送给Player.js，也就是说，它可以作为db.collection（'rooms'）.doc（roomId）.get（）在

Player.js

中使用

this.props.match.params.id

match.params

是从URL解析的键/值对，对应于路径的动态段

更多信息请点击此处：

使用事件。A是一个本机解决方案，您可以从开始使用，也可以使用

function App() {
  return (
    <Router>
      <Layout>
        <Switch>
          <PrivateRoute exact path="/">
            <Homepage />
          </PrivateRoute>
          <PrivateRoute exact path="/create-room">
            <CreateRoom />
          </PrivateRoute>
          <PrivateRoute exact path="/contribute">
            <Contribute />
          </PrivateRoute>
          <PrivateRoute exact path="/room/:id">
            <Player />
          </PrivateRoute>
          <Route path="/login">
            <LoginForm />
          </Route>
          <Route path="/confirm">
            <ConfirmForm />
          </Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
      </Layout>
    </Router>
  );
}

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

    this.getNowPlaying = this.getNowPlaying.bind(this);
    this.getRoomInfo = this.getRoomInfo.bind(this);
    

    if(params.access_token){
      spotifyWebApi.setAccessToken(params.access_token);
    }
   
  }

  getRoomInfo = () => {
    const db = firebase.firestore();
    db.collection('rooms').doc("H5H2XjdwCyrsAboQeRxT").get()
    .then((doc) => {
        if (doc.exists) {
          this.setState( {
            rooms: {
              roomAdminMail: doc.data().roomAdminMail,
              roomName: doc.data().roomName,
              roomInfo: doc.data().roomInfo
            }
          })
          
        } else {
           console.log("No such document!");
        }
      }
      
    )
  }