Reactjs 如何将动态id从数组传递到组件内部的属性-React

我正在做一个名为“智能房子”的小项目。我有一个表单，可以生成带有

颜色、名称和类型的房间。
我的问题是，我找不到一种方法在
组件动态id中插入与我单击的房间匹配的属性
索引

My App.js:

现在，属性
index={0}
，因为我不知道如何在那里设置当前id

class App extends Component {
  state ={
    rooms:[]
  }

  addRoom = (id,type,name,color) =>{
    this.setState({rooms:[{id:id,type:type, name:name, color:color, devices:[]}, ...this.state.rooms]});
  }

  render(){
    return (
    <div className="App">
      <Title title="Smart House" />
      <Router>
        <Switch>
          <Route exact path="/" component={() => {return <HomePage rooms={this.state.rooms.map((item,i) => {
            return <Link to={`/room/${item.name}`}><ArchiveRoom color={item.color} name={item.name} index={i} /></Link>
            })} />}} />
          <Route path="/addroom" component={() => {return <AddRoom add={this.addRoom} />}} />
          <Route path={`/room/:id`} component={() => { 
            return <SingleRoom room={this.state.rooms} index={0} /> 
          }} />
        </Switch>
      </Router>
    </div>
    )
  }
}

类应用程序扩展组件{
陈述={
房间：[]
}
addRoom=（id、类型、名称、颜色）=>{
this.setState（{rooms:[{id:id，type:type，name:name，color:color，devices:[]}，…this.state.rooms]}）；
}
render（）{
返回(
{返回{
返回
})} />}} />
{return}}/>
{ 
返回
}} />
)
}
}

my SingleRoom.js组件

export default class SingleRoom extends Component {
    constructor(props){
        super(props)

        this.state = {
            index: props.index,
            name: this.props.name,
            type: this.props.type
        }
    }

    getIndex = () =>{
        this.props.index(this.state.index)
    }

    render() {
        return (
            <div className="single-room">
                <Link to="/"><div className="add-room homepage-button"><button>⬅</button></div></Link> 
                     <h4>Room name: {this.props.room[this.state.index].name}</h4>
                     <h4>Room type: {this.props.room[this.state.index].type}</h4>   
                <button className="add-room-button">Add Device</button>
            </div>
        )
    }
}


导出默认类SingleRoom扩展组件{
建造师（道具）{
超级（道具）
此.state={
索引：props.index，
名称：this.props.name，
类型：this.props.type
}
}
getIndex=（）=>{
this.props.index（this.state.index）
}
render（）{
返回(
⬅ 
文件室名称：{this.props.Room[this.state.index].name}
房间类型：{this.props.Room[this.state.index].type}
添加设备
)
}
}

ArchiveRoom.js组件：

export default class ArchiveRoom extends Component {
    constructor(props){
        super(props)

        this.state = {
            index: props.index
        }
    }

    getIndex = () => {
        this.props.index(this.state.index);
    }
    render() {
        return (
            <div onClick={this.props.singleRoom} style={{backgroundColor:this.props.color, cursor:"pointer"}} className="archive-room">
                <h3>{this.props.name}</h3>
            </div>
        )
    }
}

导出默认类ArchiveRoom扩展组件{
建造师（道具）{
超级（道具）
此.state={
索引：props.index
}
}
getIndex=（）=>{
this.props.index（this.state.index）；
}
render（）{
返回(
{this.props.name}
)
}
}

非常感谢帮助者：
{
<Route path={`/room/:id`} component={props => { 
            return <SingleRoom room={this.state.rooms} {...props} /> 
          }} />

返回
}} />

您可以通过
SingleRoom
组件中的
this.props.match.params.id
访问id，请参见。
export default class SingleRoom extends Component {
    constructor(props){
        super(props)

        this.state = {
            index: props.index,
            name: this.props.name,
            type: this.props.type
        }
    }

    getIndex = () =>{
        this.props.index(this.state.index)
    }

    render() {
        return (
            <div className="single-room">
                <Link to="/"><div className="add-room homepage-button"><button>⬅</button></div></Link> 
                     <h4>Room name: {this.props.room[this.state.index].name}</h4>
                     <h4>Room type: {this.props.room[this.state.index].type}</h4>   
                <button className="add-room-button">Add Device</button>
            </div>
        )
    }
}