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


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


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