javascript - 如何使用react-router获取元素ID以显示单击元素的所有数据？

Question

所以，我有我的组件，它显示所有产品。我现在想要的是，当我单击其中一个产品时，打开组件以显示所单击产品的所有数据。当我点击时，它会显示这个 url http://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;

如何在此处获取点击的产品信息:

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;

Answer 1

在您的Router中，您应该有一个呈现ProductDesc的Route。

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

这将添加 route props到渲染的组件。您可以从 match 访问路由参数 Prop 。

产品描述

this.props.match.params.id