具有React路由器的多个Param
具有React路由器的多个Param
提问于 2020-05-24 07:48:40
我有两个组件，一个是AddList组件，另一个是DetailList compnent。我正在做的是，在每个AddList li中都有一个组件和按钮的列表。每当用户单击任意按钮时，就会将该粒子LI的相应id和名称发送到DetailList组件，以便用户能够更多地读取该特定产品的信息。我正在使用，当我通过路线上的一个param时，每件事情都能工作，我很好。我可以console.log受人尊敬的Id <Route exact path="/details/:id" component={DetailOffAdd} />。但是，当我在路由<Route exact path="/details/:id/:name" component={DetailOffAdd} />中传递第二个param时，我的组件没有挂载，也没有显示任何错误。它也不满足于我在DetailList组件中使用的id和名称。
这是我的AddList
导出默认类Addlist扩展组件{构造函数(支持){ super(props) this.state ={post：[] }}
passToDetailList(id,name) {
this.props.history.push('/details/'+id+name)
}
render() {
const { posts } = this.state;
return (
<div className="container" id="listOfAdd">
<ul className="addUl">
{
posts.map(post => {
return (
<li key={post.id}>
<button onClick={() => this.passToDetailList(post.id, post.add_title)}>VIEW</button>
</li>
);
})}
</ul>
</div>
**And the DetailList Component**
export default class DetailOffAdd extends Component {
componentDidMount(){
console.log(this.props.match.params.id)
}
render() {
return (
<Fragment>
Some code
</Fragment>
)
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-24 07:58:41
你可以在路由器路径上用一个子弹发送更多的细节-
<Route exact path="/details/:id" component={DetailOffAdd} />
let dataObj = {
id:1,
name:"someProduct"
}
let stringifyData = JSON.stringify(dataObj);为了传递数据-
passToDetailList(id,name) {
this.props.history.push('/details/'+stringifyData)
}为了获得详细的数据文件-
let data = JSON.parse(this.props.match.params.id);
console.log(data) // here is your full data Stack Overflow用户
发布于 2020-05-24 07:54:31
我认为您缺少了“/”，请尝试将您的passToDetailList更改为：
this.props.history.push(`/details/${id}/${name}`)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61983051
复制相关文章
相似问题
腾讯云开发者
