使用路由时将 match param 和 props 传递到 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，这样我就可以找到特定的人，并呈现有关该人的信息。我尝试过使用匹配属性，但这似乎也禁止我传递道具。

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

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

EDIT:

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

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

当您使用render支撑在一个<Route>组件，即render函数传递一个对象match, location, and history信息。

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

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