首页 前端知识 关于useNavigate及useLocation的使用

关于useNavigate及useLocation的使用

2024-04-21 10:04:52 前端知识 前端哥 772 749 我要收藏

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

一、引入
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 的查询部分(问号 ? 之后的部分)

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

  1. 操作

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5592.html
标签
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!