react dva如何获取参数
dva 中获取参数的方法
在 React dva 框架中，可以通过多种方式获取参数，常见场景包括路由参数、查询参数和模型状态参数。以下是具体实现方法：
路由参数获取
使用 umi 或 react-router 提供的钩子或高阶组件获取动态路由参数：
import { useParams } from 'umi';
function Page() {
const params = useParams(); // 获取如 /user/:id 中的 id
return <div>User ID: {params.id}</div>;
}查询字符串获取
通过 umi 的 useLocation 钩子解析 URL 查询参数：
import { useLocation } from 'umi';
import queryString from 'query-string';
function Page() {
const location = useLocation();
const query = queryString.parse(location.search);
return <div>Search Key: {query.key}</div>;
}模型状态获取
在 dva 的 connect 中获取全局 model 状态：
import { connect } from 'dva';
function Component({ user }) {
return <div>Username: {user.name}</div>;
}
export default connect(({ user }) => ({ user }))(Component);异步加载初始参数
在 model 的 effects 中通过 payload 获取调用参数：
effects: {
*fetchData({ payload }, { call, put }) {
const data = yield call(api.fetch, payload.id); // 从 payload 获取参数
yield put({ type: 'save', payload: data });
}
}注意事项
- 路由参数适用于 RESTful 风格的动态路径
- 查询参数适合可选参数传递
- 模型状态管理全局共享数据
- 使用 TypeScript 时可对参数进行类型定义增强安全性
以上方法覆盖了 dva 应用开发中大部分参数获取场景，根据具体需求选择合适的方式即可。
