react中路由跳转及传参的实现
1.useNavigate
useNavigate 是 React Router v6 中新增的一个 hook，可以用来进行路由跳转。
使用 useNavigate hook 首先需要安装 react-router-dom@next，然后在函数式组件中引入：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
function handleClick() {
navigate('/target-path');
}
return (
<button onClick={handleClick}>跳转到目标路径</button>
);
}useNavigate 返回一个 navigate 函数，可以用来进行路由跳转和监听路由变化。与 history.push 不同，navigate 不会在浏览器历史记录中添加重复的路由记录。如果需要添加新的历史记录，可以使用 navigate({ pathname, state }) 的形式。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
function handleClick() {
navigate('/target-path', { state: { name: 'John', age: 25 } });
}
return (
<button onClick={handleClick}>跳转到目标路径</button>
);
}navigate 函数还可以接收一个 options 对象，可以用来配置路由跳转的方式。以下是一些常用的配置选项：
replace：是否替换当前页面的历史记录；state：传递的状态数据；replace：是否替换当前页面的历史记录；shoudlNavigate：是否允许进行路由跳转；replace：是否替换当前页面的历史记录。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
function handleClick() {
navigate('/target-path', {
state: { name: 'John', age: 25 },
replace: true,
shouldNavigate: true
});
}
return (
<button onClick={handleClick}>跳转到目标路径</button>
);
}2.useLocation
在 React Router 中，可以通过 useLocation hook 来获取传递的参数和路径信息。以下是一个示例：
import { useLocation } from 'react-router-dom';
function TargetComponent() {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const name = searchParams.get('name');
const age = searchParams.get('age');
const data = location.state;
return (
<div>
<p>当前路径：{location.pathname}</p>
<p>查询参数：{`name=${name}, age=${age}`}</p>
<p>状态数据：{JSON.stringify(data)}</p>
</div>
);
}在目标页面中，可以通过 useLocation hook 获取路由路径信息和传递的参数，然后使用 URLSearchParams 对象和 location.state 属性来获取具体的值。其中：
location.pathname表示当前页面的路径；location.search表示传递的查询参数，可以使用 URLSearchParams 对象来进行解析；location.state表示传递的状态数据，可以在目标页面中获取。
注意，在使用 URLSearchParams 对象时，需要先调用 new URLSearchParams(location.search) 来创建一个实例，然后调用 get 方法来获取具体的参数值。
使用 useNavigate 进行路由跳转并传递参数的示例如下：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
function handleClick() {
navigate('/target-path', { state: { name: 'John', age: 25 } });
}
return (
<button onClick={handleClick}>跳转到目标路径</button>
);
}3.示例
在跳转到目标路径时，可以使用 state 选项来传递数据。在目标页面中，可以使用 useLocation hook 获取传递的数据，示例如下：
import { useLocation } from 'react-router-dom';
function TargetComponent() {
const location = useLocation();
const data = location.state;
return (
<div>
<p>姓名：{data.name}</p>
<p>年龄：{data.age}</p>
</div>
);
}在目标页面中，可以通过 location.state 属性获取传递的数据。注意，如果没有传递数据，则 location.state 的值为 undefined，需要进行判断处理。
到此这篇关于react中路由跳转及传参的实现的文章就介绍到这了,更多相关react 路由跳转及传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
详解React-Native全球化多语言切换工具库react-native-i18n
这篇文章主要介绍了详解React-Native全球化语言切换工具库react-native-i18n,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
浅谈react 16.8版本新特性以及对react开发的影响
本文主要介绍了react 16.8版本新特性以及对react开发的影响，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了react中label标签for报错问题，解决办法就是react中label标签没有for属性，用htmlFor代替for属性,感兴趣的朋友跟随小编一起看看吧2022-02-02
这篇文章主要介绍了React Ant Design树形表格的复杂增删改操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了使用React.forwardRef传递泛型参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本文主要介绍了antd table动态修改表格高度的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
目前好像只有table组件有实现表格数据的全选功能,如果说对于list,card,collapse等其他组件来说,需要自己结合checkbox来手动实现全选功能,这篇文章主要介绍了react antd checkbox实现全选、多选功能,需要的朋友可以参考下2024-07-07
在 React 开发里,组件可分为受控组件和非受控组件,这篇文章将为大家介绍一下它们的实现原理,方法,区别,作用和应用场景是什么,希望对大家有所帮助2025-03-03
可定制react18 input otp 一次性密码输入组件
这篇文章主要为大家介绍了可定制react18 input otp 一次性密码输入组件，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在 react 中,如果我们想控制子组件的显示和隐藏一般有两种方式,一种是父组件维护子组件显示隐藏状态,另一种则是通过 forwardRef 直接设置子组件的状态进行维护,这两种方式各有优缺点,以及对于不同的使用场景不同,今天我们就来简单讨论下,需要的朋友可以参考下2025-04-04
最新评论