关于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 格式的相关属性对其进行访问。

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);复制