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
- Routes with more segments should go first (more specific).
- Inclusive routing with the
- Exclusive routing with the
- The order of
- Use the
<Redirect>component as an
- Nesting layouts to improve performance when navigating child routes.
match.pathfor building routes.
match.urlfor building links.
<AuthorizedRoute>with Redux to change the UI based on auth state.
<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).