Javascript 使用路由时，将匹配参数和道具传递到react组件

我有一个功能性的react组件，希望为组件中的选定人员呈现一些属性

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

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

{props.persons.map（（person，i）=>{
返回(

{person.name}

)
})}

然后我走这条路

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

}/>

到现在为止，我只是通过了这些人

但是，我也希望能够传入id，以便找到特定的人，并提供有关该人的信息。我尝试过使用匹配属性，但这似乎也禁止我传递道具

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

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

编辑：

以下是我到目前为止所做的尝试

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

const主题=（道具）=>{
console.log（'props are'，props）//记录人员数组
返回(
话题
我已经被录取了

)
}
常量主题=（{match}）=>{
log（'match is'，match）//logs match参数，但现在我无法访问persons
返回(
话题
我已经被录取了

)
}

当您在

组件上使用

渲染

道具时，

渲染

函数将传递一个对象，其中包含

匹配

、

位置

和

历史

信息

(
)} 
/>

您无需将id作为道具传递给route的Topic组件，因此要获取path param的id，您可以在组件中执行以下操作以获取id

在主题组件中

您可以使用

  props.match.params.id

根据：

所有三种渲染方法都将传递相同的三个路由道具

• 匹配
• 位置
• 历史

因此，在路线的渲染道具中，您应该能够引用匹配并将其传递：

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

---

您可以使用

useRouteMatch

在你的例子中：

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

}/>

变成：

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

}/>

Topic.js变成：

import { useRouteMatch } from "react-router-dom"; // Import this
const Topic = (props) =>{
 
  let match =useRouteMatch('/topics/:id').url.split('/'); // Get url and separate with /
  match=match[match.length-1]; // The id is at the end of link, so access last array index
  console.log('match id is ', match);
  console.log('persons is ', persons);

 return(
   <div>
     <h2>Topic</h2>
     <p>I have been rendered</p>
   </div>
 )
}

从“react router dom”导入{useRouteMatch}；//导入这个
常量主题=（道具）=>{
让match=useRouteMatch（'/topics/:id'）.url.split（'/'）；//获取url并用分隔符分隔/
match=match[match.length-1]；//id位于链接的末尾，因此访问最后一个数组索引
console.log（'match id为'，match）；
console.log（'人是'，人）；
返回(
话题
我已经被录取了

)
}

对不起，我身体不太好有什么问题。。。如果你传入所有的人，为什么你不能通过人直接访问他们的id？因为没有办法知道哪个id是正确的…，因为我没有匹配的参数来获取URL参数。我只能访问道具

this.props.persons.forEach（p=>console.log（p.id））

？好的，我想我明白你的意思了。看看其中一个答案，这是做你想做的事情的正确方法

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

import { useRouteMatch } from "react-router-dom"; // Import this
const Topic = (props) =>{
 
  let match =useRouteMatch('/topics/:id').url.split('/'); // Get url and separate with /
  match=match[match.length-1]; // The id is at the end of link, so access last array index
  console.log('match id is ', match);
  console.log('persons is ', persons);

 return(
   <div>
     <h2>Topic</h2>
     <p>I have been rendered</p>
   </div>
 )
}