umijs 4.x 获取当前页面的props
时间: 2024-09-27 22:13:00 浏览: 30
Umi.js 4.x(通常指umi框架)提供了一种模块化的前端架构,其中包括动态路由管理和组件间通信等功能。如果你想要在UMI应用中获取当前页面的props(属性),你可以通过导航守卫(navigation guards)或者全局状态管理工具(如Redux、Dva)来实现。
**通过导航守卫获取props**:
在`umi-router`中,你可以创建一个自定义的导航钩子(例如`onRouteUpdate`或`async routes`配置中的函数),在这个钩子里,你可以访问到即将跳转的路径以及相关的查询参数,也就是props的一部分。
```javascript
// router.config.js 或者其他导航配置文件
import { onRouteUpdate } from 'umi';
export default {
// ...
async routes() {
return [
{
path: '/your-path',
component: YourComponent,
onRouteUpdate: ({ match }) => {
const props = match.params || match.query; // 获取当前页面的props
console.log(props);
},
},
];
},
// ...
};
```
**通过状态管理获取props**:
如果props需要在整个应用中共享,可以使用状态管理库(如Redux)将它们存储在一个全局store中,然后在需要的地方通过`useSelector`或者`connect`等API获取。
```javascript
// store.js 或者某个reducer文件
const initialState = {
currentProps: {},
};
function reducer(state = initialState, action) {
// ...
}
const mapStateToProps = (state) => ({
currentPageProps: state.currentPageProps,
});
// 组件中使用
import { useSelector } from 'umi-redux-utils';
function YourComponent() {
const currentPageProps = useSelector(mapStateToProps);
// 使用currentPageProps
}
```
阅读全文