react在函数组件中获取参数的三种方法

首先确定 下载react路由：npm i react-router-dom 

并且调试好简单的页面配置

  路由组件

并且在入口文件挂载

 

第一种方法就是我所熟知的query方法传参 列：“/index？id=${id}&&name=${name}”  

第二种方式 是通过params 方式传参，列：“/index/1”  ，不过需要在路由中预留参数

第三种方式 是通过state方式传递参数

好处就是 传递的参数在url不显示

使用useLocation 函数 返回的一个对象，直接结构state，我们传递的state是一个对象，直接对象的属性调用即可

1.query 方式传参  调用useSearchParams 传递函数，返回一个数组， 第一个参数 返回是SearchParams是一个对象，这是一个 URLSearchParams 对象，允许您使用它的方法来获取、设置和操作查询参数，

第二个参数setSearchParams 用于更新传递过来的参数的值，传递是一个对象

2.params 方式传参 调用useParams 传递函数 返回的是一个对象，传递的参数以键值对的方式存储，直接结构使用即可

3.state方法 方式传参 调用useLoaction 传递函数 返回的是一个对象，需要结构赋值state，state是一个对象，对象.属性名即可