使用方法：
- 安装history包
npm install --save history
- 在页面中使用
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() {
// 表单通过校验提交
const onFinish = values => {
const { username, password } = values;
if (username === "许许" && password === "2020") {
console.log("校验成功");
history.push("/home");
}
};
return (
<div className="login-page"></div>
);
}
- 注意： 如果遇到更新了路由url，但是不更新页面视图时：
原因有两种：
- Switch会匹配第一个路由符合的组件，例如当前路由为’/test2‘，会匹配’/‘和’/test2’。所以一直都是显示Test组件。
解决方法：将根路由放在最下面或者增加exact属性。 - 在Router中已经将history进行了注入，所以子组件中直接使用props上的history即可完成路由跳转，加上之前已经配置好的路由就可以进行页面跳转：
if (username === "许许" && password === "2020") {
this.props.history.push("/home");
} else {
message.error("账号/密码错误，请重新输入");
}
