Question

我正在开发React Shopping Cart应用程序，但找不到/弄清楚如何为应用程序中的唯一商品创建唯一的URL路径。我设法在子组件中显示props.match.params.id，而我的<Route>在父组件中看起来像<Route exact path="/product/:id" component={Product}/>。但是现在我在父组件的状态下有一个名为items的对象数组，我想根据URL :id来呈现子组件。数组中的每个项目都有一个ID，但是如何“绑定”？ url：id和我的数组中的项目ID？关键是，当您在真正的网上商店中单击商品的图像或名称时，会带您进入该独特商品的更详细的页面，我正在尝试做同样的事情。

Answer 1

您可以使用类似的方法

const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
items.map(item =>
    <Route exact path=`/product/${item.id}` component={Product} />
)

结果路径

/product/1
/product/2
/product/3

反应唯一项目

1 个答案: