我能够获得第一级 JSON 数据，即对象/产品列表

我想要实现的是点击查看按钮，它必须像电子商务网站一样打开相应的产品详细信息页面。

我被困在如何绑定和重定向到相应的产品页面的逻辑上。

现在我正在尝试的是：

我创建了一个新文件 ProductDetail.jsx 并丢失了该怎么做:-(

感谢您的帮助！

文件：products.json

{
  "data": [
    {
      "id": 1,
      "title": "Jackets",
      "img": "./img/p1.jpg",
      "des": "Pure Leather Jacket",
      "rs": 9000,
      "buy": "Add to Cart",
      "details": "View Details",
      "detailPage": [
        {
          "productDetail": "Made of Pure Leather",
          "qty": 4,
          "size": "S, M, L, XL, XXL",
          "color":"white, black",
          "AddtoCart" : "Add to Cart"
        }
      ]
    }
  ]
}

文件：Products.jsx

/* Product List Starts */
export default class Products extends React.Component {
    render() {
        return (
            <Grid>
                <Row>
                    <Col sm={12} className="text-center">
                        <h2>MEN'S STYLES</h2>
                        <p>To Make a Lasting Impression</p>
                    </Col>
                </Row>
                <ProductsC />
            </Grid>
        );
    }
}

// Products Component starts 
class ProductsC extends React.Component {
    constructor() {
        super();
        this.state = {
            data: []
        }
    }
    componentWillMount() {
        let url = "./products.json";
        Request.get(url)
            .then((res) => {
                this.setState({
                    data: res.body.data
                });
            })
            .catch(function (err) {
                alert(err);
            });
    }
    render() {
        return (

            <Row className="products-container">
                <Col sm={12}>
                    {
                        this.state.data.map(
                            (product, index) => (
                                <ProductList key={index} product={product} />
                            )
                        )
                    }
                </Col>
            </Row>
        )
    }
}
// Products Component ends 

// Products Starts
class ProductList extends React.Component {
    render() {
        const { title, img, des, rs, buy, details } = this.props.product;
        return (
            <Col xs={12} sm={3} className="text-center product-list">
                <Card>
                    <CardImg src={img} alt="product img" />
                    <Link to="/">
                        <CardTitle>{title}</CardTitle>
                    </Link>
                    <CardText>{des}</CardText>
                    <CardText>Rs : {rs} /-</CardText>
                    <Button className='btn btn-danger'>{buy}</Button> &nbsp;
                    <Button className='btn btn-primary'>{details}</Button>
                </Card>
            </Col>
        )
    }
}
// Products Ends

谢谢