javascript - 渲染路由，从产品 id，同时传入 props

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 />}

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

这是我的书本组件，当点击书本的详细信息链接时应该呈现该组件

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

编辑:

我尝试按照建议访问 Prop

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 Prop 访问，即

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

另外，你的路线应该是

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

代替

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