ReactV6通过useNavigate传递参数
前言
随着React框架的发展，Hooks的出现，使得函数式组件可以进行动态的处理各种响应式的业务，显而可见，函数式组件在React中的地位越来越重要，为此，学习Hooks就显的尤为重要。
本文重点
ReactV6通过useNavigate传递参数获取不到的问题
情景再现
业务要求： 在A组件中通过useNavigate跳转到B组件，然后在B组件中，将B组件的一些数据传递到A组件。 一般的，我们会这样写(其他无关代码已删除) 组件A
代码语言：javascript复制export default function A() {
const navigate =useNavigate(); //使用navigate跳转路由
const location =useLocation(); //使用location接收数据
//跳转搜索房屋小区页面
function searchCommiteName(){
//通过navigat
navigate('/rent/search')
}
return (
xxx
)
}组件B
代码语言：javascript复制export default function B() {
//路由跳转组件
const navigate =useNavigate();
//选择需要的数据，并且返回到A页面
function selectLoveCommit(communityName,community){
navigate(-1,{
state:{
id:'123'
}
})
}
return (
xxx
)
}当我们打印location时，会发现location中的state为空。
问题出现位置
组件B路由跳转出的位置，
代码语言：javascript复制 navigate(-1,{state:{id:'123'} })问题是因为在路由跳转时，路由返回上一个页面，虽然页面返回过去，但是参数携带不住
解决方法
代码语言：javascript复制navigate('/path',{state:{id:'123'} })将跳转的路由参数path修改成需要跳转的路由。 这样就可以在A组件页面location成功获取state对象。 亲测有效！
