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

应从React Router发送到路由组件的id道具中访问match，即

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

此外，您的路线应该是

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

代替

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

通过产品ID传递道具时的渲染路线

1 个答案: