javascript - 如何使用带有 react-router-dom 的动态路由将道具传递给组件？

Question

所以我正在创建这个小型电子商务网站，并且每次有人点击主页上的产品时都使用动态路由。根据用户选择的产品，动态路由应该指向一个包含唯一属性的组件，例如名称、价格、图像等，这些都是从 MongoDB 检索的。问题是我似乎无法找到一种方法来获取从 Mongo 获取每个项目元数据的位置的数据，一直到实际组件，因为我从未明确调用该组件，我只是有一个路由组件链接到该 Item 组件。

应用程序.js 文件

    <Router>
        <Header />
        <Switch>
            <Route path='/' exact component={Products} />
            <Route path='/contact' component={Contact}/>
            <Route path='/cart' component={Cart}/>
            <Route path="/item/:id" component={Item}/> {/*  <-- THIS LINE HERE */}
        </Switch>
        <Footer date={currentYear} />
    </Router>

显示所有产品组件的主页

也是从 MongoDB 获取数据并将其传递到“产品”道具的位置

<Grid container direction="row" >
    {products.filter(product => product.product_number === "000" || product.product_number === "001")
        .map(product => 
            <Product 
                img={product.web_link}
                gridSize={6}
                linkTitle={product.link_title}
                productPrice={product.price}
                productName={product.product_name}
             />
          )
      }
</Grid>

这是单独的产品组件

理想情况下，我们应该在这里将 props 传递给 item 组件，但我们只有一个指向它的链接

function Product(props){
    return (
        <Grid item xs={props.gridSize} sm={props.gridSize} md={props.gridSize} lg={props.gridSize} xl={props.gridSize}>
            <Link to={"../item/" + props.linkTitle}><img src={props.img} className="shirt-img" alt="shirt"/></Link>
        </Grid>
    )
}

单个项目页面的链接可以正常工作，但我似乎找不到将数据（或道具钻头）传递到它的方法。我是否遗漏了一些琐碎的事情，或者是否有特定的方法来解决这种情况？如果需要，将提供更多信息。谢谢！

标签： javascriptreactjsreact-routerreact-router-dom