react hooks 需要跳转页面传参数,并且参数中有数组,需要怎么跳转呢
时间: 2024-02-01 19:03:34 浏览: 141
页面跳转js获取传递的参数
5星 · 资源好评率100%
要在React中使用路由传递参数,可以使用React Router库。在组件中使用`useHistory` hook来进行路由导航。要传递数组参数,可以将数组转换为字符串,然后在接收参数的组件中再将其转换回数组。
以下是一个示例代码:
在发送参数的组件中:
```jsx
import React from "react";
import { useHistory } from "react-router-dom";
function MyComponent() {
const history = useHistory();
const myArray = [1, 2, 3];
const handleClick = () => {
history.push({
pathname: "/myRoute",
state: { myArray: JSON.stringify(myArray) }
});
};
return (
<button onClick={handleClick}>Go to my route</button>
);
}
```
在接收参数的组件中:
```jsx
import React from "react";
import { useLocation } from "react-router-dom";
function MyRoute() {
const location = useLocation();
const myArray = JSON.parse(location.state.myArray);
return (
<div>
<h1>My Route</h1>
<p>{myArray}</p>
</div>
);
}
```
在接收参数的组件中,我们使用`useLocation` hook来从当前路由中获取传递的参数对象。我们可以从`location.state`中获取参数对象,并使用`JSON.parse()`将其转换为原始的数组。
阅读全文