单击 React Router 中的 Link 后显示项目详细信息

IT技术 javascript html reactjs ecmascript-6 react-router
2021-05-09 01:44:11

我已经使用路由器进行路由。有一个产品列表，当点击产品时，应该显示该产品的详细信息页面（产品名称，产品价格）。我尝试在查询中传递产品对象，但它不是那样工作的。

这是我的代码

产品网格.js

const product = _.map(products, (product) =>
            <Col xs={12} md={4} key={product.id} className="products">
              <div className="product">
                <Link to={{pathname: `product/${product.name}`, query: { query: product }}}>
                  <img src={product.image} className="img-responsive" />
                </Link>
                <span className="pull-left product-name">{product.name}</span>
                <span className="pull-right price">${product.price}</span>
              </div>
            </Col>
          );

产品视图.js

class ProductView extends React.Component {
  render() {
    console.log('product', this.props.location.query);
    return (
      <div>Product View</div>
    );
  }
}

this.props.location.query 控制台

在此处输入图片说明

2个回答

我建议你通过产品的列表，props以ProductView然后用其检索产品id。这样，当用户直接导航到产品时，没有任何缺点。

产品网格.js

<Link to={{pathname: `product/${product.name}`, query: { id: product.id }}}>

产品视图.js

class ProductView extends React.Component {
  render() {
    const { products, location } = this.props;

    if (!products.length || !location) {
        return (<div>Loading...</div>);
    }

    const product = products.find(p => p.id == location.query.id);

    return product ? (
      <div>
        <h1>{product.name}</h1>
        <img src={product.image} />
        <p>{product.price}</p>
      </div>
    ) : (
      <div>Error: Product doesn't exist</div>
    );
  }
}

它们query的一个位置描述符对象将被转换成一个查询字符串。您可以使用位置描述符的state属性在视图之间传递状态。

<Link to={{ pathname: `product/${product.name}`, state: { product } }}>

然后，在您的产品组件中，您可以检查this.props.location.state以获取相关数据。这样做的缺点是直接导航到相同 URL 的用户将无法state使用。

其它你可能感兴趣的问题
上一篇在 TypeScript 中使用高阶组件在使用时省略 React 属性 下一篇如何使用 drupal 自定义module在 drupal 8 中集成react应用程序？