react-router 跳转携带参数
在 React 中,我们常常使用 react-router 进行页面的路由管理。在实际开发中,我们有时需要在路由跳转的过程中传递一些参数,比如从一个页面跳转到另一个页面时携带一些数据或者跳转到指定页面等等。本文将介绍在 react-router 中如何实现跳转携带参数。
1. Query Parameters
react-router 中最简单的方式携带参数是通过 Query Parameters,在 URL 中添加参数,参数以 ? 开头,使用 & 分隔。例如:
reactrouter6路由拦截 ```javascript
<Link to="/user?id=123&name=test">User</Link>
```
在上面的例子中,我们通过 Query Parameters 携带了两个参数,id 和 name,值分别为 123 和 test。在跳转到 /user 页面之后,我们可以通过 props.location.search 获取参数字符串,
然后通过自己写的代码解析参数字符串获取参数值。例如:
function User(props) {
const searchParams = new URLSearchParams(props.location.search);
const id = ("id");
const name = ("name");
return (
<div>
<h2>User Profile</h2>
<p>ID: {id}</p>
<p>Name: {name}</p>
</div>
);
}
export default User;
```
在上面的代码中,我们通过 URLSearchParams 对象解析了参数字符串,并分别获取了 id 和 name 参数的值。然后我们可以将这些值显示在页面上。
2. State Object
除了使用 Query Parameters,我们还可以通过 State Object 携带参数。State Object 是一个对象,可以包含一些数据,这些数据会被传递给下一个页面。例如:
function User(props) {
const { id, name } = props.location.state;
注意:State Object 只在使用 push 或者 replace 方法跳转页面时才能传递。如果使用 Link 组件跳转页面,并没有传递 state 属性,那么在跳转到新页面时,props.location.state 的值会是 undefined。
以上就是在 react-router 中实现跳转携带参数的两种方式,使用 Query Parameters 的方式适用于需要在 URL 中显示参数的情况,而使用 State Object 的方式适用于想要隐藏参数并传递一些状态数据的情况。需要根据实际情况选择不同的方式。
发表评论