关于useNavigate及useLocation的使用

个人学习记录，不准确的地方欢迎指正

一、引入

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

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

Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	返回完整的URL
pathname	设置或返回当前 URL 的路径部分。
port	返回当前 URL 的端口号。
protocol	可读可写的字符串，可设置或返回当前 URL 的协议。
search	可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）

2. 在跳转至另一页面并使用刚才页面的值时可以使用useNavigate() 进行传值，并使用useLocation() 接受值

3. 操作

在当前页面使用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);