location对象与useLocation()的使用

什么是location对象？

​ Location 对象包含有关当前 URL 的信息。

​ Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

​ Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。相关的属性如下图所示：

useLocation的使用

1. 使用场景：

​ 比如说我在当前页面想要跳转到其他页面，但是其他页面需要当前页面跳转来后的数据，这时候我们可以使用useNavigate()跳转并传值和useLocation接受传来的值。

2. 具体操作：

​ 在当前页面使用useNavigate的时候，在第二个参数将需要被发送的数据带上:

import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

navigate(navigateUrl, { state: data });

​ 在被跳转的页面用useLocation获取该参数的值：我这边使用了lodash库的_get()方法，直接获取到了属性是state的值。

import { useNavigate } from 'react-router-dom';

const location = useLocation();

const state = _.get(location, ['state']);