使用React路由器按项目ID路由

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

<代码>

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

因此，无论组件路由到何处，整个对象都将在对象中提供给它。所以，你需要做的就是

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

并将其作为-

this.props.location.customKey

希望这有帮助；）

Answer 2

您是在询问如何将列表组件拥有的产品道具发送到/t详尽/： id路由上的详细信息组件，对吗？

不要这样做-这是一种反模式。你把这两条路线联系得太紧密了。考虑以下场景：用户通过直接指向产品详细信息的深层链接到达您的站点，比如说。在这些情况下，用户从未访问过列表页面，也从未从API下载过列表，因此您的应用程序中不存在product 123的数据。

解决方案是让每条路由完全负责从头开始加载所需的数据。因此，呈现/tdetailed/：id路由的组件需要在组件didmount中获取产品本身的数据。它通过路由器提供的props React从url收集要使用的正确id。

Answer 3

您要做的是将整个对象组链接到一个特定对象。

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

<代码>

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