个人学习记录,不准确的地方欢迎指正
一、引入
import {useNavigate, useLocation} from 'react-router-dom'
二、是什么
这两个方法是在之前的项目中还没有接触过这方法,新项目使用TS进行编写,其中使用到了useLocation及useNavigate这两种钩子,个人认为其中useNavigate与a标签的href的作用类似,具有路由跳转功能,但useNavigate更有助于转到特定的URL,前进或后退页面,但同时能够进行后退与前进。useLocation可以获取路由信息,当其他页面需要当前页面跳转来后的数据时可以使用。
三、useNavigate
使用方法举例说明
const navigate = useNavigate();
const handleClick () => {
navigate('/home');
};
//作为组件
const App () => {
return <Navigate to='/home' state={state} />;
};
//前进、后退
const handleClick () => {
navigate(-1); //后退
navigate(1); //前进
};
四、useLocation
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分,可通过 window.location.xxx 格式的相关属性对其进行访问。
属性 | 描述 |
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
href | 返回完整的URL |
pathname | 设置或返回当前 URL 的路径部分。 |
port | 返回当前 URL 的端口号。 |
protocol | 可读可写的字符串,可设置或返回当前 URL 的协议。 |
search | 可设置或返回当前 URL 的查询部分(问号 ? 之后的部分) |
在跳转至另一页面并使用刚才页面的值时可以使用useNavigate() 进行传值,并使用useLocation() 接受值
操作
在当前页面使用useNavigate的时候,在第二个参数将需要被发送的数据带上:
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
navigate(navigateUrl, { state: {name: 'ada'}});
在被跳转的页面用useLocation获取该参数的值
import { useLocation } from 'react-router-dom';
const location = useLocation();
//state值:location.state.name;
另外还可以通过queryString 获取location属性的值
import queryString from 'query-string';
import {useLocation} from 'react-router-dom'
const location = useLocation();
const id = queryString.parse(location.search);