umi4 history.push的参数对比umi3 的变化

在umi3里面，跳转时传参数写法

// 带参数跳转到指定路由
history.push('/list?a=b');
history.push({
  pathname: '/list',
  query: {
    a: 'b',
  },
});

// 跳转到上一个路由
history.goBack();

在umi4里面，跳转时传参数写法

// 带参数跳转到指定路由
// const state = { a: 1 }
history.push('/list?a=b&c=d#anchor', state);

// 带参数跳转到指定路由
history.push('/list?a=b&c=d#anchor');
history.push({
  pathname: '/list',
  search: '?a=b&c=d',
  hash: 'anchor',
  state: { a: 1 } // state地址栏不显示，刷新后不消失
});

// 跳转当前路径，并刷新 state
history.push({}, state)

// 跳转到上一个路由
history.back();
history.go(-1);

umi4和 history 相关的操作，用于获取当前路由信息、执行路由跳转、监听路由变更。

// 建议组件或 hooks 里用 useLocation 取
import { useLocation } from 'umi';
export default function Page() {
  let location = useLocation();
  return (
    <div>
     { location.pathname }
     { location.search }
     { location.hash }
     { location.state }
    </div>
  );
}

// 或者
import { history } from 'umi'
export default function Page() {
  return (
    <div>
      { history.location.pathname }
      { history.location.search}
      { history.location.state}
      ...
    </div>
  );
}

大部分内容源自官网，可自行去umi3和umi4查看，因贴了官网地址导致文章被锁，已将地址去掉