Question

我想从API中读取要显示的产品。然后，当我按下显示的产品之一时，应该使用url中的产品ID和要在页面上查看的产品详细信息将我路由到该产品的详细信息的组件。我从此处读取了API的数据，并显示了带有详细信息的产品。

class Tshirts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    };
  }

  componentDidMount() {
    fetch('https://pwathemes.com/demo-api/wp-json/pwacommercepro/products')
      .then(results => results.json()).then((products) => {
        console.log(products);
        this.setState({ products });
      });
  }

  render() {
    const list = this.state.products.map(item => ({
      id: item.id,
      header: item.name,
      description: item.price + '$',
      image: item.images[0],

    }));

    return (
      <div>
        <Bar head="T-Shirts" />
        <Dropdown text="SORT BY COST" fluid selection options={sortOptions} className="dropp" />
        <Header as="h4" textAlign="center" attached className="hh4" >{list.length} ITEMS </Header>
        <Link to="/tdetailed/:id">
          <Card.Group items={list} itemsPerRow={2} />
        </Link>

      </div>
    );
  }
}

我想添加一个按产品ID进行路由的链接。如何发送详细信息作为其他组件的道具？

Answer 1

<Link/>属性还接受一个对象。您可以将路线转换为-

之类的对象

let data = {pathname: '/tdetailed/:id', customKey: 'CustomValue' }

因此，无论您的组件路由到什么地方，整个对象都会在location对象中提供给它。因此，您所需要做的就是

<Link to={data}>...</Link>

并以-

的形式在路由组件中获取它

this.props.location.customKey

希望这会有所帮助;）

Answer 2

您要执行的操作是将整个对象组链接到一个特定对象。

相反，当您映射项目中的对象时，应该将Link组件放在Card.Group内，并使用所需产品的ID。我猜您想链接到被点击的产品，在这种情况下，用

包裹该产品卡的元素

<Link to={'*pathname/*' + id }> <YourProductCardComponentOrButtonElement /> </Link>

“ / tdetailed /：id”（这应该仅在您的路由组件中，以指定它是确切路由的一部分的ID）

Answer 3

您要问的是如何通过/tdetailed/:id路线将列表组件必须具有的产品道具发送到详细信息组件，对吧？

请勿执行此操作-这是一种反模式。您正在使两条路线紧密耦合。请考虑以下情形：用户通过直接链接到产品详细信息（例如/tdetailed/123的深层链接到达您的站点。在这种情况下，用户永远不会访问列表页面，也永远不会从API下载列表，因此产品123的数据在您的应用程序中不存在。

该解决方案是让每条路线完全负责从头开始加载所需的数据。因此，呈现/tdetailed/:id路由的组件需要在componentDidMount中获取产品本身的数据。它会通过React Router提供的道具从网址中收集要使用的正确id。

使用React Router按项目ID进行路由

3 个答案: