Reactjs 路由器链接在mouseenter事件上不起作用

路由器链接mouseenter事件不起作用。当我将光标放在路由器链接上时，它不会更改路由。我的路由器链接工作正常，但我想处理mouseenter事件。请给我建议一个解决这个问题的方法

import React, { Component } from 'react';
    import { browserHistory } from "react-router";
    import createHistory from "history/createBrowserHistory";
    import ToggleDisplay from 'react-toggle-display';
     import './App.css';
    import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
    import Example from './Example.js';
    import About from "./About.js"; 
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import PropTypes from "prop-types";

    class App extends Component {
      constructor(props) {
        super(props);
        this.onNavigateHome = this.onNavigateHome.bind(this);
      }

      onNavigateHome() {
        this.props.history.push('/about');
      }
      render() {
        return <div className="App">
            <Router >
              <div>
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/about" onMouseEnter={this.onNavigateHome.bind(this)}>
                      About
                    </Link>
                  </li>

                </ul>

                <hr />

                <Route exact path="/" component={Example} />
                <Route path="/about" component={About} />
              </div>
            </Router>
            <Example />
          </div>;
      }
    }

    export default App;

import React，{Component}来自'React'；
从“react router”导入{browserHistory}；
从“历史记录/createBrowserHistory”导入createHistory；
从“反应切换显示”导入切换显示；
导入“/App.css”；
导入“./node_模块/bootstrap/dist/css/bootstrap.min.css”；
从“/Example.js”导入示例；
从“/About.js”导入关于；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“道具类型”导入道具类型；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.onNavigateHome=this.onNavigateHome.bind（this）；
}
onNavigateHome（）{
this.props.history.push（'/about'）；
}
render（）{
返回


家


关于



;
}
}
导出默认应用程序；

React路由器的链接设计为点击事件，而不是鼠标进入事件。你可以用另一种方法，在鼠标输入时使用状态改变。下面是一个伪代码

  changeState(){
    if (!this.state.entered) {
      // window.location.href='/newResource';
      this.props.history.push('/about');
    }
    this.setState({ entered : !this.state.entered });
  }

  render() {

    return (<Router>
      <span role="link" onMouseEnter={this.changeState}>
        Link
      </span>
    </Router>);
  }

changeState（）{
如果（！this.state.entered）{
//window.location.href='/newResource'；
this.props.history.push（'/about'）；
}
this.setState（{entered:！this.state.entered}）；
}
render（）{
返回(
链接
);
}