渲染路线，从产品id，同时传入道具

Question

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

export default class Product extends Component {
  render() {
console.log(this.props)


return (
<Router>
  <div>
    <div>
    {this.props.products.map(product =>(
    <div>
      <p>Products</p>
      <p>Id:{product.id}</p>
      <p>Title: {product.title}</p>
      <p>Info: <br/>{product.info}</p>
      <NavLink to={`/products/${product.id}`}>Details</NavLink>
      <br/>
      </div>
    ))}
    </div>

然后我想做一个路线，让每个产品，都有一个附加的链接，可以看到书的详细信息。

我想用id做一个条件路由，然后把值作为props传入

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

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

这是我的书本组件，当点击一本书的详细信息链接时，它应该被渲染

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

编辑：

我尝试访问建议的道具

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

Answer 1

id 应该可以从 React Router 发送到路由组件的 match 属性访问，即

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

另外，你的路线应该是

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

而不是

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