Using React Router

React Router is a collection of navigational components that compose declaratively with your application. More info

Articles & Tutorials

Wouter: A Minimalist Alternative to React Router (blog.bitsrc.io)
Oct 13, 2020
Wouter is a minimalist routing library that implements only the most used functionality from React Router. It also targets only the most recent environment, which is React v16.8.0+ and ES6-compliant browsers to further reduce the bundle size.
  • Nathan Sebhastian
A guide to using React Router v6 in React apps (blog.logrocket.com)
Aug 07, 2020
In this tutorial, let’s take a look at how to create routes using the React Router v6 library. Do note that, at the time of writing this post, React Router v6 is still in beta. This tutorial is going to give you a peek into some of the new features the library is coming out with.
  • Aman Mittal
React Router VS Reach Router (blog.bitsrc.io)
Jul 13, 2020
Which React routing library should you use?
  • Nathan Sebhastian
React Router Tutorial – How to Render, Redirect, Switch, Link, and More, With Code Examples (freecodecamp.org)
May 26, 2020
In this article, you'll learn how to use React-Router and its components to create a Single Page Application.
  • Vijit Ail
The future of Reach Router and React Router (blog.logrocket.com)
Apr 03, 2020
In this article, I will talk about the new features in React Router, compare Reach Router (and React Router) to the new Hooks-based API, and briefly discuss how to migrate to this API.
  • Yusuff Faruq
A Sneak Peek at React Router v6 (alligator.io)
Mar 17, 2020
At the time of this writing, React Router v6 is still in alpha, but the time is about right to start playing with it and exploring what’s to come. This guide will give you a peek at the new features/changes!
  • William Le
React Router hooks will make your component cleaner (blog.logrocket.com)
Feb 24, 2020
Starting with version 5.1, React Router will include four useful hooks you can use to write clean, neatly stacked navigation components that please the eye. I’ll show you how these new hooks work by comparing them to the old patterns in version 4.
  • Nathan Sebhastian
A Complete Beginner's Guide to React Router (Including Router Hooks) (freecodecamp.org)
Feb 18, 2020
In this tutorial, we are going to cover everything you need to know to get started with React Router.
  • Ibrahima Ndaw
The Hooks of React Router (css-tricks.com)
Feb 11, 2020
React Router 5 embraces the power of hooks and has introduced four different hooks to help with routing. You will find this article useful if you are looking for a quick primer on the new patterns of React Router.
  • Agney Menon
Learn React Router in 5 Minutes - A Beginner's Tutorial (freecodecamp.org)
Nov 11, 2019
Sometimes you've only got 5 minutes to spare. Instead of wasting it on social media, let's get a 5-minute introduction to React-Router! In this tutorial, we're going to learn the basics of routing in React by building navigation for a Scrimba knitting shop website.
  • Bob Ziroll
A Guide to Upgrading to React Router 4 (freecodecamp.org)
Aug 01, 2019
Not long after I started working at my current position, the team realized that it would be necessary for us to upgrade to React 16 in order to use a new UI library we were keen on switching to.
  • Lekha Surasani
React Router: How to add child routes (itnext.io)
Jul 10, 2019
For react router 4 and above.
  • Avery Duffin
How React Hooks can replace React Router (blog.logrocket.com)
Jul 04, 2019
We are going to explore other possibilities and look at how we can improve the routing experience in React apps using hooks.
  • Peter Ekene Eze
The Future of React Router and @reach/router (reacttraining.com)
May 17, 2019
We are bringing together the best of React Router and Reach Router into a new, hook-based API.
React Router v5 (reacttraining.com)
Mar 20, 2019
Today, we are excited to announce the release of React Router version 5.
React Router Introduction (dev.to)
Mar 07, 2019
React Router is a third party library created to solve the problem of routing in React app. It wraps around the browser history API and does the job of keeping your React application UI in sync with the browser's URL.
  • Nathan Sebhastian
Must know concepts of React Router (blog.bitsrc.io)
Feb 07, 2019
This guide will take you through some must know React Router principles.
  • Aayush Jaiswal
Recursive paths with React Router (tylermcginnis.com)
Jan 03, 2019
Because React Router is just components, you can do crazy things like having recursive routes. In this post we’ll learn how they work by breaking down the ‘Recursive Paths’ example on the React Router docs.
Pass props to React Router's Link component (tylermcginnis.com)
Jan 02, 2019
Often times when building an app with React Router you’ll need to pass props through a Link component to the new route. In this post, we’ll break down how that process works.
How to use React Router with Firebase (robinwieruch.de)
Jan 01, 2019
A React tutorial on how to combine React Router and Firebase to navigate a user through the application while fetching data from the Firebase database or even passing data through React Router.
The Hitchhiker’s Guide to React Router v4: the hidden value of route config (medium.freecodecamp.org)
Sep 15, 2018
Welcome to the Hitchhiker’s Guide to React Router v4, Part IV!
  • Eduardo Vedes
The Hitchhiker’s Guide to React Router v4: recursive paths, to infinity and beyond! (medium.freecodecamp.org)
Sep 08, 2018
Welcome to the third part of the Hitchhiker’s Guide to React Router v4. In this article we’re going to focus on recursive paths.
  • Eduardo Vedes
The Hitchhiker’s Guide to React Router v4: [match, location, history] — your best friends! (medium.freecodecamp.org)
Sep 02, 2018
Now that we’ve set the ball rolling with our first small App, let’s focus on your three travel mates: match, location and history
  • Eduardo Vedes
The Hitchhiker’s Guide To React Router v4: Grok React Router in 20 minutes (medium.freecodecamp.org)
Aug 26, 2018
Hi fellow React Hitchhiker! Want a ride into React Router? Jump in. Let’s go!
  • Eduardo Vedes
Conditional Routing with React Router v4 (scotch.io)
May 08, 2018
In this tutorial, we will see how to build a simple user dashboard application that serves different routes to users based on the size of their device screens.
Introduction to React Router (flaviocopes.com)
Mar 28, 2018
React Router 4 is the perfect tool to link together the URL and your React app. React Router is the de-facto React routing library, and it's one of the most popular projects built on top of React.
React Router 4: A Practical Introduction (auth0.com)
Mar 27, 2018
A gentle introduction to React Router 4 through practical examples.
  • Prosper Otemuyiwa
Server Rendering with React and React Router (tylermcginnis.com)
Mar 07, 2018
In this post, we’ll start from scratch and slowly build a server side rendered React (with React Router) while breaking down some of the complexity as we go.
React Router v4: Philosophy and Introduction (tylermcginnis.com)
Jan 04, 2018
In this post, we’ll talk about the philosophies behind React Router and give an introduction to the syntax by breaking down the “Basic” example on the React Router docs.
React Router v4: The Complete Guide (sitepoint.com)
Sep 26, 2017
This tutorial introduces you to React Router v4 and what you can do with it.
  • Manjunath M
Animating Route Transitions with React Router (blog.logrocket.com)
Aug 23, 2017
In this article, we’re going to create a React app with the new React Router (v4) and add some animations when navigating between views.
How to pass props to a child component via React Router (flaviocopes.com)
Aug 20, 2017
This short tutorial explains how to pass props to a child component via React Router
All About React Router 4 (css-tricks.com)
Aug 07, 2017
I will cover the most common API concepts, but the real focus is on patterns and strategies that I've found to be successful.
  • Brad Westfall
Server side rendering with React.js, React Router v4, React Helmet and CSS Modules (blog.digitalkwarts.com)
Jun 05, 2017
How can we efficiently serve JavaScript application providing fast content delivery and solve the SEO problem. The answer is - Server Side Rendering or how we will call it - SSR.
  • Andrew Tolochka
Getting Started with React Router v4 (themeteorchef.com)
Mar 30, 2017
If you're ready to see what's new in v4, let's dig in!
  • Ryan Glover
A Simple React Router v4 Tutorial (medium.com)
Mar 11, 2017
In this tutorial, we will be building a single-page application website for a local sports team. We will go over all of the basics needed to get our site up and routing.
  • Paul Sherman

Video Guides & Talks

Handling 404 pages (catch all routes) with React Router v5 (youtube.com)
Oct 27, 2020
In this video you'll learn how to implement catch all routes for handling 404 pages with React Router v5.
Protected routes and authentication with React Router v5 (youtube.com)
Oct 26, 2020
In this video, you'll learn how to create authenticated routes (routes that only certain users can access based on their auth status) using React Router v5.
Building a SPA (Single Page App) using React Router (youtube.com)
Jun 05, 2020
In this Live Stream we're going to use ReactJS and React Router to build a SPA (Single Page Application).
  • Florin Pop
Learn routing in React with React Router 6 (youtube.com)
Apr 28, 2020
I try out React Router v6. This version is still in Alpha on the time of recording. So please note that the API may not be 100% stable.
  • Thomas Weibenfalk
React Router v6 Tutorial in 15 Minutes (youtube.com)
Mar 07, 2020
React Router v6 is both the next version of React Router v5 but also @reach/router... it's a coming together of all the best things from both routers in an easy to use light-weight package. In this tutorial we'll cover all the basics from routing, nested routes, dynamic routes, linking to catch-all routes in just over 15 minutes.
React Router Tutorial (youtube.com)
Aug 29, 2019
Learn how to use React Router. I go over setup, creating routes, changing routes, and route params.
Live Editing in Groups with React Router (youtube.com)
May 31, 2019
Learn how to create groups for people to edit in and share the link with friends. We'll add React Router to help with this.
APIs in React Tutorial - Recipe App using React Router (youtube.com)
Apr 25, 2019
Learn how to use external APIs with React and React Router. This tutorial shows how to create a recipe finder application in React.
  • Hamza Mirza
Updates on React Router (youtube.com)
Nov 08, 2018
Over the past 4 years, React Router has become one of the most widely used pieces of the React ecosystem. Working on React Router was actually how I got my start in React, and it's been incredibly humbling and rewarding to work on something that brings so much value to businesses and to the React community. In this talk, I'll cover the current state of React Router, as well as discuss several new features and updates we have made so the router is ready for React's (async) future!
How to integrate Firebase Authentication with React Router in React 16.3 (youtube.com)
May 17, 2018
In this screencast, I'm integrating Firebase Authentication in a React 16.3 project with React Router. I hope that you'll find this video informative.
  • William Candillon
Learn React Router in 2 minutes (youtube.com)
May 05, 2018
Plus a lesson about polluting your low level components with context.
React Router v4: Philosophy and Introduction (youtube.com)
Jan 04, 2018
In this post, we’ll talk about the philosophies behind React Router and give an introduction to the syntax by breaking down the “Basic” example on the React Router docs.
The Road to Router v4 (youtube.com)
Aug 17, 2017
In this talk Ryan will share some history behind the changes they made to React Router in version 4, and how it relates to React generally.
Upgrading To React Router 4 (youtube.com)
Jun 13, 2017
In this stream, I'll be upgrading the Level Up Store to React Router 4.

Books & Guides

React Router Quick Start Guide (packtpub.com)Get it on Amazon
Sep 29, 2018
Learn how you can implement routing in a React Web/Native application using React-Router library
  • Sagar Ganatra

Courses & Video Series

React.js Essential Training (lynda.com)
Dec 18, 2018
React is a great choice for dynamic, data-driven user experiences. Learn how to create browser-based apps and websites with the component-based React.js library.
The Complete React Js and Redux Course - Build Modern Web Apps (packtpub.com)
Nov 16, 2018
Go from beginner to React.js expert by building an Instagram-like web app with React 16, React Router, Redux, and Firebase!
  • Rayan Slim
  • Rob Percival
React Front To Back (udemy.com)
Jul 23, 2018
Learn & Master React With The Context API + Redux & Build a Real World Project With Firebase/Firestore.
React Recipes (lynda.com)
Jul 16, 2018
This course provides tested, easy-to-follow instructions to solve the most common challenges that React developers face every day
  • Diego Muracciole
React: React Router (lynda.com)
Jun 05, 2018
In this course, explore routing with React Router for both web and native applications
Client Side React Router 4 (pluralsight.com)
Mar 01, 2018
This course shows the strength of dynamic routing and the possibilities of changing how you write React.js code when a Route becomes a first-class React component.
  • David Starr
React For Beginners (reactforbeginners.com)
Feb 28, 2018
Upgrade your JavaScript skills to learn React.js in just a couple of afternoons. A premium step-by-step training course to get you building real world React.js + Firebase apps and website components.
React Router v4 (tylermcginnis.com)
Jan 09, 2018
The goal of this course is to tackle every scenario you might encounter when building an app with React Router so that when the time comes, you're ready.
The Complete React Web Developer Course (with Redux) (udemy.com)
Sep 07, 2017
Learn how to build and launch React web applications using React v16, Redux, Webpack, React-Router v4, and more
  • Andrew Mead
Add Internationalization (i18n) to a React app using React Intl (egghead.io)
Jul 27, 2017
In this course, we will incorporate react-intl into a project created with create-react-app and react-router.
  • Damon Bauer
React Router 4 Basics (teamtreehouse.com)
May 10, 2017
Learn to use React Router v4, a declarative routing solution for React, to manage navigation and rendering of components in your applications.
  • Guil Hernandez
Add routing to React apps using React Router v4 (egghead.io)
Mar 21, 2017
In this course, you will learn about the basics of React Router v4 to help you get started. We will look at the core components that React Router supplies and how they interact together to create a robust routing solution for your React applications.
  • Joe Maddalone
GraphQL with React: The Complete Developers Guide (udemy.com)
Feb 17, 2017
Learn and master GraphQL by building real web apps with React and Node.
  • Stephen Grider
Learn Redux (learnredux.com)
Jun 10, 2016
A 20 video / 2.5 hour course to learn how to use Redux, React Router and React together.

Podcast Episodes

Michael Jackson on React Router v6 and Empathy in Open Source (reactpodcast.com)
Mar 12, 2020
This week we chat with Michael of React Training and learn everything we need to know about React Router v6 — what's in store, how to update, and what he's learned about empathy in the process.