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

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为空。

问题出现位置

组件B路由跳转出的位置，

 navigate(-1,{state:{id:'123'} })

问题是因为在路由跳转时，路由返回上一个页面，虽然页面返回过去，但是参数携带不住

解决方法

navigate('/path',{state:{id:'123'} })

将跳转的路由参数path修改成需要跳转的路由。
这样就可以在A组件页面location成功获取state对象。
亲测有效！