Documentation

React Training — React Router
API docs and examples for React Router.

Articles

Paul Sherman — A simple React Router v4 tutorial
A gentle intro to RR4 with broader coverage of its included components.

CSS Tricks — All about React Router 4
A deep dive to RR4 with practical problem-solving.

• Comparison of “React Router 3” vs “React Router 4”.
• In RR3, routes are exclusive meaning only one matched route will render.
• In RR4, routes are inclusive meaning all matched routes will render.
• The code order of <Route> matters.
• Routes with more segments should go first (more specific).
• Inclusive routing with the <Route exact> property.
• Exclusive routing with the <Switch> component.
• The order of <Route> inside a <Switch> matters.
• Use the <Redirect> component as an else inside a <Switch>.
• Nesting layouts to improve performance when navigating child routes.
• Use match.path for building routes.
• Use match.url for building links.
• Create <AuthorizedRoute> with Redux to change the UI based on auth state.
• Using <Link> vs <NavLink> to build a header with “active link” states based on the route.
• In RR4, there’s no built-in method for getting query string parameters. Choose a library.
• Demo on CodePen

Courses

Tyler McGinnis — React Router 4
Subscription from $25/month for 34 videos (6 hours).