image.png

在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查看，因貼了官網地址導致文章被鎖，已將地址去掉