Javascript 如何使用react路由器获取元素ID以显示来自单击元素的所有数据？

所以，我有我的组件，它显示了所有的产品。我现在想要的是，当我单击其中一个产品时，打开组件以显示所单击产品的所有数据。当我点击时，它会显示这个urlhttp://localhost:3000/products/1. 如何在url末尾获取具有此id的数据

这是从mysql获取所有数据的组件：

import React from "react";
import {Link} from "react-router-dom"


class Home extends React.Component{
    constructor(){
        super()
        this.state = {
            products: [],
            isLoaded: false
        }
    }

   componentDidMount(){
        fetch("/home")
        .then(res => res.json())
            .then(result =>{
                        return(
                            this.setState({
                                products: result,
                                isLoaded: true
                            })
                        )
            })
   }

    render(){
      if(!this.state.isLoaded){
          return(
              <h1>Loading...</h1>
          )
      }

      return (
            <div className="row text-center">
                    {this.state.products.map(elements => 
                            <div className="col-lg-6">
                                    <h1>
                                        <Link to={`products/${elements.id}`}>{elements.name}</Link> 
                                    </h1>
                            </div> 
                    )}  
            </div>
         )
    }
}
export default Home;

在路由器中，您应该有一个呈现ProductDesc的路由

---

你能分享你的路由器代码吗？@DrewReese我希望你是指这个。我是新手：当然，下面已经回答了。你在哪里尝试访问该id以便我可以完善我的答案？在componentDidMount中获取特定数据？@drewerese我只需要获取在Home组件中单击的产品的所有数据，并在ProductDesc组件中显示。问题是我不知道如何获取被单击元素的数据。希望您现在明白：您是否有一个API端点，您正试图击中？fetch在应用程序上下文中是否意味着其他内容？你能更具体地说明你想要完成什么吗？

import React from "react";

class ProductDesc extends React.Component{
    constructor(){
        super()
    }

    componentDidMount(){
        fetch()
            .then(res => res.json())
                .then(result =>{
                    console.log(result)
                })
    }

    render(){
        return(

        )
    }
}
export default ProductDesc;

<Route path="products/:id" component={ProductDesc} />

this.props.match.params.id