Javascript 传递道具时从产品id开始的渲染路线

我有一个Product.js组件，其中我呈现了一个产品（书籍）列表

导出默认类产品扩展组件{
render（）{
console.log（this.props）
返回(
{this.props.products.map（product=>(
产品

Id:{product.Id}

标题：{product.Title}

信息：
{product.Info}

细节


))}

然后我想做一个路线，这样每个产品都有一个附加的链接，以查看该书的详细信息

我想用id创建一个条件路由，然后将值作为道具传入

 <Route path="/:id" render={() => <Book />}

}

在这里，我很怀疑，我应该传递什么，因为我不再能够访问渲染产品中的道具。我可以通过链接传递它吗？我应该制作嵌套路由吗

这里是MyBook组件，当单击书籍的详细信息链接时，应该呈现该组件

export default function Book({ props}) {
  console.log(props)
    return (
    <div>
      <h1>Book details go here</h1>
      <h3></h3>
    </div>
  )
}

导出默认功能书（{props}）{
控制台日志（道具）
返回(
书的细节在这里
)
}

编辑：

我试着像建议的那样使用道具

export default function Book(props) {
  console.log(props.match.id)
    return (
    <div>
      <h1>Book details go here</h1>
      <h3></h3>
    </div>
  )
}

导出默认功能书（道具）{
console.log（props.match.id）
返回(
书的细节在这里
)
}

应该可以从路由器发送到路由组件的

匹配
道具访问
id
，即

const id = this.props.match.params.id;

另外，你的路线应该是

<Route path="/:id" component={Book} >



而不是

<Route path="/:id" render={() => <Book />} />

}/>
my bad-
this.props.match.params.id
我除了在
中传递的道具外，没有收到任何东西，
match
道具应该在
书中提供
组件是的，但不是..我将编辑问题，我认为路线是错误的..可能是这样-试试
组件={Book}
而不是
render={（）=>}
<Route path="/:id" render={() => <Book />} />