react应用: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，需要判断和处理。
