can i change routing onmouseenter event in react js? - reactjs

Question

when i click the Link router Link works perfectly but how can i access router link onmouseenter event please suggest me.its kind of a hover effect.when i hovered the router link menu its active and go to the link destination.
import React, { Component } from 'react';
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";
class App extends Component {
render() {
return <div className="App">
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Example} />
<Route path="/about" component={About} />
</div>
</Router>
<Example />
</div>;
}
}
export default App;

Answer 1

Doesnt seem like a good idea changing history state onmouseover.
Anyways for your scenario call below within onmouseeenter:
this.props.history.push(newUrl);
Components added to route will have history as props. For eg: Below Example component will have history as props
<Route exact path="/" component={Example} />
Other components not added to route mostly child components won't have history as prop. To get access to react-router history we use #withRouter decorator in our project. There is an option available if decorators are not used. To use decorators add "stage-3" of babel in your project.
Update:
import { withRouter } from "react-router";
#withRouter
class App extends Component {
...
}
Add history to props. Now within component use: this.props.history.push(newUrl);