使用 React Router 按项目 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

你问的是如何将listing组件拥有的product props发送到/tdetailed/:id路由上的detail组件，对吧？

不要这样做 - 这是一种反模式。您使两条路线的耦合过于紧密。考虑以下场景：用户通过直接指向产品详细信息的深层链接（例如 /tdetailed/123）到达您的站点。在这些情况下，用户从未访问过列表页面，从未从 API 下载列表，因此产品 123 的数据不存在于您的应用中。

解决方案是让每条路线完全负责从头开始加载所需的数据。所以渲染/tdetailed/:id 路由的组件需要在componentDidMount 中为产品本身获取数据。它通过 React Router 提供的 props 从 url 收集正确的 id 以使用。

Answer 2

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

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

包裹那个产品卡的元素

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

"/tdetailed/:id" （这应该只在你的路由组件中指定它是一个作为确切路由一部分的 id）

Answer 3

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

这样的对象

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

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

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

并在路由组件中获取它 -

this.props.location.customKey

希望这会有所帮助；）