React Router: activeStyle & activeClassName
react-router provides two props for setting a specific style on a Link component whose path matches our current route. activeStyle allows for an inline style while activeClassName allows for an class defined in an external stylesheet.
[00:00] If we want to create an active state to our link when it matches its particular path, we can use active style, which works just like any other style in React. Here, we'll pass in a color of green, and we'll go and copy this to the other links.
[00:22] When we save that, we can see that, since we're on the home path, home is green. We go to about. About is green. Contact is green. Back to home. We can also use something called active class name, and we can just pass in the name of an existing class. We'll just call this active.
[00:43] We'll jump over here to our index HTML and create that style class with a color of green. Save that, and if we load this back up over here, so home is green with the active style. About is green with the active style, and contact is green with the active class name.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!