使用方法：
- 安裝history包
npm install --save history
- 在頁(yè)面中使用
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
export default class login extends React.Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props);
}
render() {
// 表單通過校驗(yàn)提交
const onFinish = values => {
const { username, password } = values;
if (username === "許許" && password === "2020") {
console.log("校驗(yàn)成功");
history.push("/home");
}
};
return (
<div className="login-page"></div>
);
}
- 注意： 如果遇到更新了路由url欲侮，但是不更新頁(yè)面視圖時(shí)：
原因有兩種：
- Switch會(huì)匹配第一個(gè)路由符合的組件糯而，例如當(dāng)前路由為’/test2‘槽驶，會(huì)匹配’/‘和’/test2’。所以一直都是顯示Test組件满哪。
解決方法：將根路由放在最下面或者增加exact屬性献联。 - 在Router中已經(jīng)將history進(jìn)行了注入，所以子組件中直接使用props上的history即可完成路由跳轉(zhuǎn)颠焦，加上之前已經(jīng)配置好的路由就可以進(jìn)行頁(yè)面跳轉(zhuǎn)：
if (username === "許許" && password === "2020") {
this.props.history.push("/home");
} else {
message.error("賬號(hào)/密碼錯(cuò)誤斩熊，請(qǐng)重新輸入");
}
