Reactjs 如何从路由传递到嵌套组件中的子组件react组件

我有一个react组件，它从内置于ASP.NET内核中的RESTAPI获取健身房列表。该呈现组件是一个表，数据库中的每条记录对应一行。在每一行中，我有一列显示健身房的名称，一列显示一个按钮，该按钮呈现一个名为“ViewMembers”的组件

ViewMembers是一个类似于ListGyms组件的组件，但是我不需要获取gyms，而是应该获取特定gym中的成员。然而，我的问题来了。我不知道如何将id作为道具传递给我的ViewMembers组件，因为我需要在那里获取成员，并且我需要从健身房传递id

我的第二个组件显示一个表单，允许您更新特定的健身房。这里我也有同样的问题，那就是，我不确定如何从列表库传递id道具

我需要一些指导

我尝试了一些建议，但仍然没有解决我的问题

这是我的密码

ListGyms.js

class ListOfGyms extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            gyms: [],
            isItClicked: false,
            isItClickedMember: false
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleChangeForMember = this.handleChangeForMember.bind(this);

    }
    componentDidMount() {
        axios.get('https://localhost:44345/api/gyms')
            .then(res => {
                const gyms = res.data;
                this.setState({ gyms });
                console.log("GYMS", gyms);
            })
            .catch(err => {
                console.log(err);
            })
    }
    handleChange(e) {
        e.preventDefault();
        this.setState({
            isItClicked: true,
            isItClickedMember: false
        })
        console.log("heh");

    }
    handleChangeForMember(e) {
        e.preventDefault();
        this.setState({
            isItClickedMember: true,
            isItClicked: false
        })
        console.log("View Member Component")
    }
    
    renderTableData() {
        return this.state.gyms.map((gym) => {
            
            return (
                <tr key={gym.id}>
                    <td>
                    <label for="gymName">Gym Name: {gym.gymName}</label>
                    </td>
                    <td>
                    <button onClick={this.handleChange}>Edit</button>
                    </td>
                    <td>
                    <button onClick={this.handleChangeForMember}>View Members</button> 
                    </td>
                </tr>
            ) 
        })
    }
    render() {
        if (this.state.isItClicked) {
            return (
                <>
            <div class="container" className="ListOfGyms">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>List of Gyms</h2>
                    </div>
                </div>
            <table id='gyms' class="table table-dark">
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
            </div>
                    <EditGym/>
                    
                    
                </>
          )
        }
        if (this.state.isItClickedMember) {
            return (
                <>
            <div class="container" className="ListOfGyms">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>List of Gyms</h2>
                    </div>
                </div>
            <table id='gyms' class="table table-dark">
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
            </div>
            <ViewMembers/>
             </>
            )}
            
        
        
        return (
            <div class="container" className="ListOfGyms">
                <div class="row">
                    <div class="col-sm-6">
                        <h2>List of Gyms</h2>
                    </div>
                </div>
            <table id='gyms' class="table table-dark">
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
            </div>
        )
    }
}
export default ListOfGyms;

类ListOfGyms扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
健身房：[]，
isItClicked:错误，
isItClickedMember:false
}
this.handleChange=this.handleChange.bind（this）；
this.handleChangeForMember=this.handleChangeForMember.bind（this）；
}
componentDidMount（）{
axios.get（）https://localhost:44345/api/gyms')
。然后（res=>{
const-gyms=res.data；
这个.setState（{gyms}）；
控制台日志（“健身房”，健身房）；
})
.catch（错误=>{
控制台日志（err）；
})
}
手变（e）{
e、 预防默认值（）；
这是我的国家({
isItClicked：没错，
isItClickedMember:false
})
控制台日志（“heh”）；
}
HandleChangeFormMember（e）{
e、 预防默认值（）；
这是我的国家({
isItClickedMember：没错，
isItClicked:错误
})
日志（“查看成员组件”）
}
renderTableData（）{
返回此.state.gyms.map（（gym）=>{
返回(
健身房名称：{Gym.gymName}
编辑
查看成员
) 
})
}
render（）{
if（this.state.isItClicked）{
返回(
健身房名单
{this.renderTableData（）}
)
}
if（this.state.isItClickedMember）{
返回(
健身房名单
{this.renderTableData（）}
)}
返回(
健身房名单
{this.renderTableData（）}
)
}
}
导出默认的语法列表；

从“/logo.svg”导入徽标；
导入“/App.css”；
从“./components/ListGyms”导入ListOfGyms；
从“/components/AddGym”导入AddAGym；
从“react Router dom”导入{Route，Switch，Link，BrowserRouter as Router}；
从'react bootstrap'导入{ListGroup，Nav，Navbar}；
从“/components/EditGym”导入EditGym；
从“./components/EditMember”导入EditMember；
函数App（）{
返回(
健身房管理应用
家
加健身房
}>/
);
}
导出默认应用程序；

假设您想将健身房id传递给view members组件，您可以这样做

在表中的按钮中，您要执行以下操作：

<button onClick={() => handleChangeForMember(gym.id)}></button> 

handleChangeForMember = (id) => {
        this.setState({
            isItClickedMember: true,
            isItClicked: false
        })
        let history = this.props.history; // history object from react-router-dom
        history.push(`/members/${id}`);
    }

或

---

作为补充说明，您的渲染功能可以轻松地组合到一个JSX块中，其中只有

和

是有条件的，而不必在同一事物的三个版本中重复自己的操作。您可以像

{this.state.isItClickedMember&&}

和

{this.state.isItClicked&}

这样包含它们。这对我不起作用。每次我启动React应用程序时，应用程序将自动路由为localhost:3000/members/id。我想要的是停留在主页上，在ListGyms表中的按钮上单击后呈现viewmembers和编辑组件，并将id作为道具传递click@FilipBogdanovski可能使路由成为精确的路由可能会解决启动URL的问题。这不起作用。我再试了一次，启动URL转到/members/$%7Bid%7D

<button onClick={() => handleChangeForMember(gym.id)}></button> 

handleChangeForMember = (id) => {
        this.setState({
            isItClickedMember: true,
            isItClicked: false
        })
        let history = this.props.history; // history object from react-router-dom
        history.push(`/members/${id}`);
    }

<Route path="/memebers/:id" component={ViewMembers} />

const { id: gymId} = this.props.match.params; // for class component

const { id: gymId } = props.match.params; // for functional component