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

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

[00:00] The redirect component in React Router does exactly what it sounds like it does. It allows us to redirect from one route to another. We've got our simple, three-route, single-page application here. Some link is going to each of those.

[00:17] We've got each of those with its own route. On the right here, if we go to About, run the About page, Contact, and back to Home.

[00:26] Let's say, for whatever reason, we're going to call this the About Us page. We're going to update all these routes to about-us. We'll do that there as well. We're still outputting the same component.

[00:41] Let's also update this link right there. Now we've got our Home, About Us, and Contact. But let's just say that we have a Legacy link, whether it's in our application or coming from another website, we still got this About link. If we load this up and try to go to it, it's not going to work.

[01:03] What we're going to do is use a redirect component. Redirect. We just say from About to about-us. Save that, and we can go to our Home, or About Us, or Contact. When we go to this Legacy link, it redirects us to the About Us page.

Course

Getting Started with React Router v3

React Router: Redirect

Share this video with your friends