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