I have this renderization done by reactJS
render() {
return (
<div>
<Router>
<div className="wrapper2">
<nav id="menu-principal" className="main menu-principal">
<ul>
<li><NavLink className="home-link" exact to="/">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>
)
}
When I click on the link that contains a "home-link" class, I would like to do some action. Like an action I tried to do in the example below which didn't work. How can I solve it? Thank you.
var el = document.querySelector(".menu-principal");
el.onclick = (event) => {
for(var i = 0; i < el.childNodes.length; i++) {
if(el.childNodes[i].className === "home-link"){
alert('true')
}
}
}
Because the element you targeted is <NavLink>
tag which normally should navigate to another router page, I believe the event you have attached will not get running. I suggest you to not using <NavLink>
just use this.props.history.push('/path/to/route')
instead on the onClick
handler ( after the procedures you need to run before navigating to another routing address ).
On the following example, Please pay attention about withRouter
and i change <NavLink>
to span then attach onHomeCLick
handler to it:
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 );
UPDATE===========
Another trick if you like to use <NavLink>
, the only solution is a "Call back" way. It will trigger once you navigated to the route ( I still can't see if there is way to do it prior to navigation ). Here we go:
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.