Is there a way to click Navlink from within a function? - reactjs

Question

Basically, I'm delaying the navigation.
After clicking the Link, the onClick handler prevents the navigation by checking a condition and calls another function. If certain condition is met, then only the page navigates to another.
So how can I trigger Navlink click from within that function.

Answer 1

I was able to solve this problem by using event.preventDefault().
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import Modal from './Modal'
var confirmation = {};
class Example extends Component {
handleClick(event) {
if(this.props.data.length!=0) {
confirmation = {
prompt: (
<div className="row">
<div className="col s12 m5"><a className="btn" onClick={this.props.actions.toggleModal()}>No</a></div>
<div className="col s12 m7"><NavLink to={"/"+this.props.endpoint+"/1"} activeClassName="active" className="btn"}>Yes, Navigate to Option 1</NavLink></div>
</div>
)
}
event.preventDefault();
}
}
render() {
return (
<div>
<nav>
<div className="row">
<div className="col s10">
<ul className="col s12">
<li className="col s4 m4 l3"><NavLink to={"/"+this.props.endpoint+"/1"} activeClassName="active" onClick={this.handleClick.bind(this)}>Option 1</NavLink></li>
<li className="col s4 m4 l3"><NavLink to={"/"+this.props.endpoint+"/2"} activeClassName="active">Option 2</NavLink></li>
<li className="col s4 m4 l3"><NavLink to={"/"+this.props.endpoint+"/3"} activeClassName="active">Option 3</NavLink></li>
</ul>
</div>
</div>
</nav>
{
this.props.openModal ?
<Modal data={confirmation}/>
: null
}
</div>
)
}
}
export default example

Answer 2

Instead of using the react-router Link component, you can use their API to programmatically navigate to another page (if the certain condition is met).
export default class MyComponent extends Component {
navCheck(nextPage) {
if (someCondition) {
this.context.router.history.push(nextPage);
}
}
render() {
return(<a onClick={() => this.navCheck('/next-page')}>Navigate To Another Page</a>);
}
}
MyComponent.contextTypes = {
router: PropTypes.shape({
history: PropTypes.object.isRequired,
}),
};
More information on the official documentation: https://reacttraining.com/react-router/web/api/history