路由跳转传参和获取参数

最新推荐文章于 2024-06-08 09:33:02 发布

不愿透露姓氏的权某

最新推荐文章于 2024-06-08 09:33:02 发布

阅读量167

点赞数

文章标签： java servlet 前端

本文链接：https://blog.csdn.net/m0_59714321/article/details/126463900

版权

//父组件
export default Father(props){
//方法一
  const goDetail=() =>{
//类组件加上this.props
     props.history.push({
         pathname:'/message',
         query:{
           id:122333444455555
         }
      })
   }
//方法二
   const goDetail2=() =>{
     window.open('message?id=ddddd')
    // window.open(`message?id=${变量名}`)
    //window.location.replace('地址?id=123')
   }

return(
        <button onClick={ goDetail }> 跳转</button>
         <button onClick={ goDetail2 }> 跳转</button>
    )

}

//子组件
export default Children(props){

return(
//获取参数
        <button> id:{ props.location.query.id }</button>

        <button> id2:{ props.location.search.slice(4) }</button>
    )

}