React Router is the defacto router for any React application and it allows us to extract the state of our application from the browser's address bar.

In this course we'll explore the core features of React Router in common examples.  From routing with individual components to more complex routing consisting of multiple components, query-strings, route parameters,  and redirects.  

In this lesson we'll install our dependencies and setup a simple build process for converting our ES6 into ES5 using Babel and Webpack for the rest of the react-router lessons.

React Router: Development Environment Setup

In this lesson we'll take our first look at the most common components available to us in react-router; Router, Route, and Link.

React Router: Router, Route, and Link

In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browserHistory which delivers clean urls, but requires server work to implement

React Router: hashHistory vs browserHistory

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.

React Router: activeStyle & activeClassName

Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX.  In this lesson we'll explore nesting routes and accessing the children of parent routes.

React Router: Nested Routes

IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available.

React Router: IndexRoute

A router library is no good if we have to hardcode every single route in our application.  In this lesson we look at how to access variables in our routes and pass them into our components.

React Router: Route Parameters

In this lesson we'll learn how to render multiple component children from a single route.

React Router: Named Components

In this lesson we'll extract props for our component from a querystring in the route url.

React Router: Querystring Parameters

The Redirect component in react-router does exactly what it sounds like.  It allows us to redirect from from one route to another.

React Router: Redirect

setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.

Getting Started with React Router v3

Instructor

Course content (11 lessons)

Instructor