Umi4获取不到props,默认为空对象

升级到 Umi4 后,有同事和我反映,之前的一些组件不能用了,获取不到 propsprops 是空对象。

Umi4 在代码层做了修改,将 react-router@5 升级到 react-router@6,所以路由相关的一些 api 存在着使用上的差异。

props 默认为空对象,以下属性都不能直接从 props 中取出:

O1CN01H9ScQv21ymaLkwZ8p_!!6000000007054-2-tps-1210-374.png Umi4获取不到props,默认为空对象 经验总结

需要采用下面的方式:

children

import { Outlet } from 'umi';
<Outlet />;

主要在全局 layout 中需要修改:

如 layouts/index.tsx

import React from 'react';
+ import { Outlet } from 'umi';
 
export default function Layout(props) {
  return (
    <div>
-      { props.children }
+      <Outlet />
    </div>
  );
}

使用了 React.cloneElement 方式渲染的路由组件改造,示例

import React from 'react';
+ import { Outlet } from 'umi';
 
export default function RouteComponent(props) {
  return (
    <div>
-      { React.cloneElement(props.children, { someProp: 'p1' }) }
+      <Outlet context={{ someProp: 'p1' }} />
    </div>
  );
}

组件改成从 useOutletContext 取值

import React from 'react';
+ import { useOutletContext } from 'umi';
 
- export function Comp(props){
+ export function Comp() {
+   const props = useOutletContext();
 
  return props.someProp;
}

history

+ import { history } from 'umi';
export default function Page(props) {
  return (
    <div onClick={()=>{
-          props.history.push('list');
+          history.push('list');
    }}>
    </div>
  );
}

location

建议组件或 hooks 里用 useLocation 取,其他地方就用 window.location 获取。

export default function Page(props) {
+  const { location } = window;
  return (
    <div>
-     { props.location }
+     { location }
    </div>
  );
}

或者

+ import { useLocation } from 'umi';
export default function Page(props) {
+    let location = useLocation();
  return (
    <div>
-     { props.location }
+     { location }
    </div>
  );
}

match

+ import { useMatch } from 'umi';
export default function Page(props) {
+ const match = useMatch({ path: 'list/search/:type' });
  return (
    <div>
-     { props.match }
+     { match }
    </div>
  );
}

需要注意 match 数据的差异:

// match v5
isExact: true
params: {}
path: "/users/abc"
url: "/users/abc"

// match v6
params:{  }
pathname: "/list/search/articles"
pathnameBase: "/list/search/articles"
pattern: {path: 'list/search/:type'}

更多改动和 api 变更,可参考 react-router@6


未经允许不得转载:w3h5 » Umi4获取不到props,默认为空对象

赞 (1)
分享到: +

评论 沙发

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)