I would like to click on the NavLink component without immediately proceeding to the path that I set for it. Upon clicking on NavLink, I need to check a condition and, if it is true, set state. If it is false, then only proceed to NavLink path.
NOTE: I do NOT want to use history.push("/path"). I want to do this using NavLink only.
import React from "react";
import {NavLink} from "react-router-dom";
class SomePage extends React.Component {
constructor() {
super();
this.state = {
someVar: false
};
}
someFunction = () => {
//does some stuff
}
onClick = () => {
someFunction().then( someBool => {
if(someBool !== undefined) {
e.preventDefault(); // not working
setState({someVar: true})
}
})
};
render() {
return (
<div className="App">
<form>
<NavLink to="/anotherPage" onClick={this.onClick}>
Another Page
</NavLink>
</form>
</div>
);
}
}
Let your onClick handler consume the click event, and under the correct condition prevent the default action (and event propagation, if necessary).
Example:
class SomePage extends React.Component {
constructor() {
super();
this.state = {
someVar: false
};
}
onClick = (e) => {
if (thing is true) {
e.preventDefault(); // <-- prevent link navigation from occurring
this.setState({ someVar: true });
} else {
// allow link navigation to occur
// proceed to NavLink
// this else might not be necessary if it doesn't do anything
// other than allow the navigation to occur
}
};
render() {
return (
<div className="App">
<form>
<NavLink to="/anotherPage" onClick={this.onClick}>
Another Page
</NavLink>
</form>
</div>
);
}
}
Since it seems the click handler uses asynchronous code you'll need to entirely prevent the default link action and conditionally issue an imperative navigation action via the history.push.
class SomePage extends React.Component {
constructor() {
super();
this.state = {
someVar: false
};
}
someFunction = async () => { // <-- returns Promise
//does some stuff
}
onClick = target => async (e) => {
e.preventDefault();
try {
const someBool = await someFunction();
if (someBool !== undefined) {
setState({ someVar: true });
} else {
this.props.history.push(target);
}
} catch(error) {
// catch and handle any errors/rejected Promises, etc...
}
};
render() {
return (
<div className="App">
<form>
<NavLink to="/anotherPage" onClick={this.onClick("/anotherPage")}>
Another Page
</NavLink>
</form>
</div>
);
}
}