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

一、引入

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 ;

};

//前进、后退

const handleClick () => {

navigate(-1); //后退

    navigate(1); //前进

};

四、useLocation

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

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

属性描述hash设置或返回从井号 (#) 开始的 URL（锚）。host设置或返回主机名和当前 URL 的端口号。hostname设置或返回当前 URL 的主机名。href返回完整的URLpathname设置或返回当前 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);

参考文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：