ReactV6通过useNavigate传递参数获取不到的问题解决方法以及注意事项

腿子代码了

发布于 2023-10-08 10:44:27

4370

发布于 2023-10-08 10:44:27

文章被收录于专栏：腿子代码了专栏

ReactV6通过useNavigate传递参数

前言

随着React框架的发展，Hooks的出现，使得函数式组件可以进行动态的处理各种响应式的业务，显而可见，函数式组件在React中的地位越来越重要，为此，学习Hooks就显的尤为重要。

本文重点

ReactV6通过useNavigate传递参数获取不到的问题

情景再现

业务要求：在A组件中通过useNavigate跳转到B组件，然后在B组件中，将B组件的一些数据传递到A组件。一般的，我们会这样写(其他无关代码已删除) 组件A

export default function A() {
  const navigate =useNavigate();	//使用navigate跳转路由
  const location =useLocation();	//使用location接收数据

  //跳转搜索房屋小区页面
  function searchCommiteName(){
  	//通过navigat
    navigate('/rent/search')
  }

  return (
    xxx
  )
}

组件B

export default function B() {
    //路由跳转组件
    const navigate =useNavigate();

    //选择需要的数据，并且返回到A页面
    function selectLoveCommit(communityName,community){
        navigate(-1,{
            state:{
                id:'123'
            }
        })
    }



  return (
    xxx
  )
}

当我们打印location时，会发现location中的state为空。