Routing In React

Articles & Tutorials

Dynamic content in Next.js with the router (flaviocopes.com)
Nov 12, 2019
How to setup dynamic content in a Next.js site
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
How to build a React Hooks front-end app with routing and authentication (freecodecamp.org)
Sep 30, 2019
In this tutorial, we will go over how to build a complete front end app with routing and authentication.
  • Mohammad Iqbal
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
Next.js Practical Introduction: Navigation and Routing (auth0.com)
Jul 30, 2019
Learn how to use Next.js to add navigation and routing to server-side rendered React applications.
  • Dan Arias
The Reach Router Tutorial (flaviocopes.com)
Jul 27, 2019
A quickstart to using Reach Router in your React app.
React Router: How to add child routes (itnext.io)
Jul 10, 2019
For react router 4 and above.
  • Avery Duffin
Exploring Next.js 9 Dynamic Routing & API Routes (reacttricks.com)
Jul 09, 2019
Next.js 9 has been released yesterday with some amazing new features. In this post we'll create a simple RSS feed reader to explore how to use the new file system based dynamic routing and API routes.
  • Kristian Heruc
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
A <Router /> with Hooks and Suspense (frontarm.com)
Feb 18, 2019
Navi is a new kind of router for React. It lets you declaratively map URLs to content, even when that content is asynchronous.
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.
Navi: SEO & routing with vanilla create-react-app (frontarm.com)
Dec 12, 2018
Build big, fast, CDN-delivered websites with great SEO & SMO, and all with vanilla create-react-app.
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
Implicit routing and server rendering for React apps using Next.js (blog.pusher.com)
May 15, 2018
Server rendering is one of the trickiest assignments we get as developers working with UI libraries and frameworks. React being a UI library is not an exception. We will discuss the impact of server rendering and how we can achieve it for React-based apps.
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.
Routing in ReasonReact (medium.com)
Apr 29, 2018
Introduction to Routing and Subscriptions
  • Ali Sharif
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
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

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.
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!
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.
ReactCasts #13 - Server Side Rendering: Data Fetching & Routing (youtube.com)
Jul 27, 2017
I will create a complete, server-rendered React application with routing and data fetching.
  • Cássio Souza
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
React Cookbook (packtpub.com)Get it on Amazon
Aug 30, 2018
Over 66 hands-on recipes that cover UI development, animations, component architecture, routing, databases, testing, and debugging with React
  • Carlos Santana Roldan

Courses & Video Series

Complete Intro to React, v5 (frontendmasters.com)
Jun 04, 2019
Learn to build real-world applications using modern React! Much more than an intro, you’ll start from the ground up, getting all the way to using the latest features in React, including hooks, effects, context, and portals.
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 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
Modern React with Redux (udemy.com)
Apr 30, 2018
Master the fundamentals of React v16.3.2 and Redux as you develop apps with React Router, Webpack, and ES6.
  • Stephen Grider
MERN Stack Front To Back: Full Stack React, Redux & Node.js (udemy.com)
Apr 15, 2018
Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Learn how to put it all together.
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 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
Node with React: Fullstack Web Development (udemy.com)
Jul 26, 2017
Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.
  • Stephen Grider
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

Libraries

react-native-navigation (wix.github.io)9714
v2.26.5
Aug 06, 2019
A complete native navigation solution for React Native
  • Guy Carmeli
  • Daniel Zlotin
  • Wix
navi (frontarm.com)1506
v0.13.3
Jul 19, 2019
A batteries-included router for React.
react-navigation (reactnavigation.org)14990
v3.11.1
Jul 13, 2019
Routing and navigation for your React Native apps
  • Brent Vatne
  • Eric Vicenti
react-plain-router (github.com)118
v0.5.0
Apr 25, 2019
A 2kb React router that works exactly as expected with native Javascript.
  • Francisco Presencia
router5 (router5.js.org)1329
v7.0.2
Feb 22, 2019
Flexible and powerful universal routing solution.
  • Thomas Roch
buttermilk (buttermilk.js.org)101
v2.0.0
Feb 19, 2019
Beautifully simple isomorphic routing for React projects.
  • Evan Jacobs
@reach/router (reach.tech)5055
v1.2.1
Sep 25, 2018
Next Generation Routing for React