Redirect to Product Detail Page from Product List through JSON Data with ReactJS

问题

I'am able to get the first level of JSON Data i.e., objects / Product List

What I'am trying to achieve is on click of view button it has to open respective product detail page just like e-commerce website.

I have got stuck on the logic how i will bind and redirect to respective product page.

Now what I'am trying is :

i have created a new file ProductDetail.jsx and Lost what to do :-(

Appreciate your kind help!

File : 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"
        }
      ]
    }
  ]
}

File : 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

Thanks

回答1:

To show detailPage you would need a separate route/page, then you could pass detailPage data to the page component.

Use a link instead of a button, it looks the same with class btn btn-default

 <Link to={`/Products/${ this.props.product.id }`}   className="btn btn-primary">
          View Details
  </Link> 

You must have a route configured for /Products/:id ...

回答2:

Your Products component could render to:

<Grid>
    <Row>
        <Col sm={12} className="text-center">
            <h2>MEN'S STYLES</h2>
            <p>To Make a Lasting Impression</p>
        </Col>
    </Row>
    <Route path="/products" exact component={ ProductsC } />
    <Route path="/products/:id" component={ ProductDetail } />
</Grid>

The first Route will render the ProductsC component that displays the list and a Link to "/products" + productID for each product. When navigating to that path, the second Route would be rendered, and the ProductDetail could get and show the detail of the product (the ID being match.params.id).

来源：https://stackoverflow.com/questions/48498805/redirect-to-product-detail-page-from-product-list-through-json-data-with-reactjs