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

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

[00:00] In React router, IndexRoute allows us to render a default component when no other route is present. To get us started, I'm going to also include IndexRoute from React library and our home component, I'm going to call this outer and that'll just make more sense. Here I'm going to say "our site."

[00:23] We're going to have our lanes but we're also going to need to get our prompts, children. We're going to pass in prompts and we're going to pass in or we're going to use prompts.children and then our other components won't need these links components because they're both going to be children of our outer components.

[00:46] Here, in our root path, we're going to use our outer component. We're going to make both of these other paths children of that path, or that route.

[00:59] We can get rid of the absolute path on contact and we're going to update route on the About path to be IndexRoute. It's going to be IndexRoute and that does not in fact need a path. We're going to get rid of that. We're going to leave About as its component to render.

[01:23] What happens here is when we get to the outermost path, the route path, we're going to render this component outer. But if there's no other path after the forward slash, we're automatically going to render the About component as a child of the outer component.

[01:41] We'll save that and we can see that we've automatically rendered About. When we switch to contact, we get contact, no problem. But if we go to home, again, we get About automatically.

Course

Getting Started with React Router v3

React Router: IndexRoute

Share this video with your friends