51工具盒子
react应用：react中路由跳转及传参的实现。我们今天一共分享几种方法，往下看吧。
1.useNavigate {#heading-0}
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 {#heading-1}
在 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.示例 {#heading-2}
在跳转到目标路径时，可以使用 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，需要进行判断处理。
