useNavigate接收路由携带过来数据
时间: 2024-03-26 11:36:13 浏览: 136
useNavigate并不直接接收路由携带过来的数据,它只是用于在React组件中进行路由跳转。
如果你需要在跳转到某个路由时携带数据,可以在调用navigate函数时将数据作为第二个参数传递进去,如下所示:
```
import { useNavigate } from 'react-router-dom';
const MyComponent = () => {
const navigate = useNavigate();
const handleClick = () => {
const data = { name: 'John', age: 30 };
navigate('/my-route', { state: data });
}
return (
<button onClick={handleClick}>跳转到我的路由并携带数据</button>
)
}
```
在上面的代码中,我们定义了一个MyComponent组件,并在其中使用了useNavigate来获取一个navigate函数。然后,在handleClick函数中,我们定义了一个数据对象data,并将其作为state参数传递给navigate函数。
当用户点击按钮时,就会跳转到"/my-route"路由,并且携带了一个名为state的对象。在"/my-route"页面中,可以通过location.state来获取这个数据对象。
需要注意的是,如果用户直接访问"/my-route"路由而非从MyComponent中跳转过来,location.state可能会为空,因此需要做好判断。
阅读全文