因为你的目标元素是
<NavLink>
标签通常应该导航到另一个路由器页面,我相信您所附加的事件不会运行。我建议你不要用
<纳夫林克公司;
只使用
this.props.history.push('/path/to/route')
而不是
onClick
处理程序(在导航到另一个路由地址之前需要运行的过程之后)。
在下面的例子中,请注意
withRouter
我改变
<纳夫林克公司;
跨越然后连接
onHomeCLick
处理程序:
import React, {Component} from 'react';
import {withRouter, Route, BrowserRouter as Router} from "react-router-dom";
class YourComponent extends Component {
onHomeCLick = () => {
//DO something here prior to router navigation of ".home-link" element
this.props.history.push( '/' );
};
render(){
return (
<div>
<Router>
<div className="wrapper2">
<nav id="menu-principal" className="main menu-principal">
<ul>
<li><span className="home-link" onClick={this.onHomeCLick}>inÃcio</span></li>
<li><NavLink exact to="/nota_biografica">nota biográfica</NavLink></li>
</ul>
</nav>
<div className="page-content">
<Route exact path='/nota_biografica' render={() => <NotaBiografica />} />
<Route exact path='/' render={() => <Home />} />
</div>
</div>
</Router>
</div>
)
}
}
export default withRouter( YourComponent );
更新========
如果你想用另一个技巧
<纳夫林克公司;
唯一的解决方案是“回电”方式。一旦你导航到路线,它就会触发(我仍然看不到在导航之前有没有办法做到这一点)。我们走到这里:
import React, {Component} from 'react';
import {Route, BrowserRouter as Router} from "react-router-dom";
class YourComponent extends Component {
isActive= (match, location) => {
if (match) {
console.log('Hi i am active, do something here');
}
return match;
};
render(){
return (
<div>
<Router>
<div className="wrapper2">
<nav id="menu-principal" className="main menu-principal">
<ul>
<li><NavLink className="home-link" activeClassName="active" isActive={this.isActive}>inÃcio</NavLink></li>
<li><NavLink exact to="/nota_biografica">nota biográfica</NavLink></li>
</ul>
</nav>
<div className="page-content">
<Route exact path='/nota_biografica' render={() => <NotaBiografica />} />
<Route exact path='/' render={() => <Home />} />
</div>
</div>
</Router>
</div>
)
}
}
export default YourComponent;