javascript - 使用路由时将 match param 和 props 传递到 React 组件中

Question

我有一个功能性的 React 组件，并且想要为我的组件中的选定人员呈现一些属性。

所以我首先映射一个简单的列表，其中包含每个人的链接

      {props.persons.map((person, i) =>{
      return(
     <li key={i}>
      <Link to={`/topics/${person.id}`}>{person.name}</Link>
     </li>
      )
    })}
  </ul>

然后我制定路线

<Route path={`/topics/:id`} render={() => <Topic persons={props.persons} />} />

到目前为止，我只是传递人员。

但是我也希望能够传递 ID，这样我就可以找到特定的人，并呈现有关该人的信息。我尝试过使用匹配属性，但这似乎也禁止我传递 Prop 。

有什么建议可以解决这个问题吗？

也许可以只传递所选人员的属性？

编辑:

这是我到目前为止所尝试过的。

   const Topic = (props) =>{
  console.log('props are ', props) //logs array of persons
  return(
    <div>
      <h2>Topic</h2>
      <p>I have been rendered</p>
    </div>
  )
}




 const Topic = ({match}) =>{
  console.log('match is ', match) //logs match parameter, but now i can't access persons
  return(
    <div>
      <h2>Topic</h2>
      <p>I have been rendered</p>
    </div>
  )
}

Answer 1

当您使用render时支撑<Route>组件，render函数传递一个带有 match 的对象, location ，和history信息。

https://reacttraining.com/react-router/web/api/Route/route-props

<Route 
  path={`/topics/:id`} 
  render={({match}) => (
    <Topic id={match.params.id} persons={props.persons} />
  )} 
/>