umi中history和useModel的使用

本文主要是介绍umi中history和useModel的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.history：

history 是用于在 React 组件中进行页面导航和管理历史记录的工具。通过 history，你可以在不同页面之间进行跳转、监听路由变化等操作。在 Umi 中，通常会使用 history 对象来实现页面的跳转和路由相关的操作。示例代码可能如下所示：

发：
import { history } from '@umijs/max';
// 在某个事件触发时跳转到指定页面，并传递参数
const handleClick = () => {const params = {id: 123,name: 'example',};history.push({pathname: '/another-page',query: params,});
};收：
import { useLocation } from 'umi';
const AnotherPage = () => {const location = useLocation();const params = location.query;console.log(params); // { id: 123, name: 'example' }return (<div><h1>Another Page</h1><p>ID: {params.id}</p><p>Name: {params.name}</p></div>);
};

很少使用字符串拼接的传递参数：

发：
import { history } from '@umijs/max';
// 在某个事件触发时跳转到指定页面，并传递参数
const handleClick = () => {const id = 123;history.push(`/another-page/${id}`);
};收：
import { useParams } from 'umi';
const AnotherPage = () => {const params = useParams();console.log(params.id); // 123return (<div><h1>Another Page</h1><p>ID: {params.id}</p></div>);
};

2.useModel：

useModel 是一个用于在函数式组件中获取和操作 Umi Model 的钩子函数。在 Umi 中，Model 是一种用于管理数据和状态的概念，可以帮助你更好地组织和管理应用程序的数据流。通过 useModel，你可以在函数式组件中轻松地访问和操作 Model 中的数据和方法。示例代码可能如下所示：

import { useModel } from '@umijs/max';const MyComponent = () => {const { data, loading, error, fetchList } = useModel('example');useEffect(() => {// 在组件加载时获取数据fetchList();}, []);if (loading) {return <div>Loading...</div>;}if (error) {return <div>Error: {error.message}</div>;}return (<div><h1>Example Data:</h1><ul>{data.map(item => (<li key={item.id}>{item.name}</li>))}</ul></div>);
};

这篇关于umi中history和useModel的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---