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 路由跳转及传参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
