react hooks 需要跳转页面,并且页面有数组参数要怎么传递呢
时间: 2023-11-30 18:08:43 浏览: 256
React_native Navigator页面跳转组件参数传递
要在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 }
});
};
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 = location.state.myArray;
return (
<div>
<h1>My Route</h1>
<p>{myArray}</p>
</div>
);
}
```
在接收参数的组件中,我们使用`useLocation` hook来从当前路由中获取传递的参数对象。我们可以从`location.state`中获取参数对象,并直接使用`myArray`属性来获取传递的数组参数。
阅读全文