react-router-dom之 history+路由url更新页面不刷新的解决办法

使用方法：

1. 安装history包

npm install --save history

2. 在页面中使用

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，但是不更新页面视图时： 原因有两种：

1. Switch会匹配第一个路由符合的组件，例如当前路由为’/test2‘，会匹配’/‘和’/test2’。所以一直都是显示Test组件。 解决方法：将根路由放在最下面或者增加exact属性。
2. 在Router中已经将history进行了注入，所以子组件中直接使用props上的history即可完成路由跳转，加上之前已经配置好的路由就可以进行页面跳转：

      if (username === "许许" && password === "2020") {
        this.props.history.push("/home");
      } else {
        message.error("账号/密码错误，请重新输入");
      }