Skip to content

Instantly share code, notes, and snippets.

@JofArnold
Created February 1, 2018 18:58
Show Gist options
  • Save JofArnold/21d8176377ef5a7d55a7b9221b852e63 to your computer and use it in GitHub Desktop.
Save JofArnold/21d8176377ef5a7d55a7b9221b852e63 to your computer and use it in GitHub Desktop.
React Router NavLink with inactiveClassName and isActive child function enhancements
@JofArnold
Copy link
Author

Example use:

<NavLink {...someProps} inactiveClassName="blue" activeClassName="red">
  {({ isActive }) =>
    isActive ? <span>Active :)</span> : <span>Inactive :(</span>}
</NavLink>;

Probably needs the same for style attribute too, for completeness, but I'll leave that as a lesson for the reader

@ankidulol
Copy link

Thank you for making this! I was struggling with this problem for days

@schirodes
Copy link

Thank you a lot!

@harshraj8843
Copy link

Thank you very much for this 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment