umi3用法改动

-代表删除，+代表使用

1、dva方面

1.1、connect

-import { connect } from 'dva';
+import { connect } from 'umi';

1.2、dispatch

dispatch已经被useDispatch替换


-import { dispatch} from 'dva';
+import { useDispatch } from "umi";
+const dispatch = useDispatch()

使用connect包裹组件后可以使用dispatch

connect源码
/**
 * @type P: Params matched in dynamic routing
 */
export interface ConnectProps<
  P extends { [K in keyof P]?: string } = {},
  S = LocationState,
  T = {}
> {
  dispatch?: Dispatch;
  // https://github.com/umijs/umi/pull/2194
  match?: match<P>;
  location: Location<S> & { query: T };
  history: History;
  route: IRoute;
}

dispatch里面不能再添加路由相关的操作了

 -dispatch(routerRedux.push({pathname, query} as LocationDescri<any>));
 +history.push({pathname, query} as LocationDescri<any>)
直接使用history

1.3、dva的路由都移动到umi里面了

-import { Route, Switch, Redirect, withRouter,
- RouteComponentProps } from 'dva/router';


+import { Route, Switch, Redirect, withRouter,
+ RouteComponentProps } from 'umi';

2、路由

2.1、router被删除

umi/router完全废弃，使用history来替换router

- import router from 'umi/router';
+ import { history } from 'umi';




- router.push('/foo');
+ history.push('/foo');

2.2、动态路由

umi3 中不再使用$来标识动态路，约定 []包裹的文件或文件夹为动态路由，
[ $]为可选的动态路由
src/pages/users/[id].tsx 会成为 /users/:id
src/pages/users/[id$].tsx 会成为 /users/:id?

2.3、Link,Prompt

-import Link from 'umi/link';
+import { Link } from 'umi';




-import Prompt from 'umi/Prompt ';
+import { Prompt } from 'umi';

2.4、使用location和history

import { useLocation } from 'umi';

export default () => {
  const location = useLocation();
  return (
    <div>
      <ul>
        <li>location: {location.pathname}</li>
      </ul>
    </div>
  );
};

import { useHistory } from 'umi';


export default () => {
  const history = useHistory();
  return (
    <div>
      <ul>
        <li>history: {history.action}</li>
      </ul>
    </div>
  );
};

3、CSS 里引用别名或三方库

需要加 ~ 前缀。

# 别名
- background: url(@/assets/logo.png);
+ background: url(~@/assets/logo.png);
# 三方库
- @import url(foo/bar.css);
+ @import url(~foo/bar.css);