Clash Royale CLAN TAG#URR8PPP

NavLink onActive callback

Is there a way to know when the NavLink is active? something like this?:

NavLink

<NavLink to="/mylink" activeClassName="active" onActive=this.doSomething />


1 Answer
1

You can use NavLink's isActive callback to achieve this. isActive lets you define your own behaviour when the link is active; it gets the match and your current location object. You can modify it to take a callback that will fire if match is true. Here is a simple example:

NavLink

isActive

isActive

match

location

const isActive = onActive => (match, location) =>
if (match)
onActive();

return match;


const App = () =>
const onActive = () => console.log("link is active");
return (
<BrowserRouter>
<div>
<NavLink to="/abc" activeClassName="active" isActive=isActive(onActive)>Go To ABC</NavLink>
<Route path="/abc" render=() => <h1>ABC Page</h1> />
</div>
</BrowserRouter>
);



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.