React Router: Development Environment Setup

React Router: Router, Route, and Link

React Router: hashHistory vs browserHistory

React Router: activeStyle & activeClassName

React Router: Nested Routes

React Router: IndexRoute

React Router: Route Parameters

React Router: Named Components

React Router: Querystring Parameters

React Router: Redirect

React Router: setRouteWillLeaveHook

Getting Started with React Router v3

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.

https://app.egghead.io/api/v1/lessons/react-react-router-activestyle-activeclassname/subtitles

[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.

React Router: activeStyle & activeClassName

Share this video with your friends

Course

Getting Started with React Router v3