Routing In React

Articles & Tutorials

Hookrouter: A Modern Approach to React Routing (blog.bitsrc.io)
Apr 20, 2021
Routing in React applications using the Hookrouter
  • Isuri Devindi
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
Routing in Next.js – A Complete Beginner's Guide (freecodecamp.org)
Oct 05, 2020
Next.js is a React framework that ships with all the features you need for production. It enables routing in your app by using the file-system-based routing.
  • Ibrahima Ndaw
An introduction to Wouter: A React Router alternative (blog.logrocket.com)
Sep 16, 2020
In this guide, you will get an overview of Wouter and see how it can be implemented in place of React Router.
  • Gaurav Singhal
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
Stop using client-side route redirects (kentcdodds.com)
Apr 13, 2020
Why you should stop using client-side route redirects (like the from prop on React Router's Redirect component) and what you should do instead.
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
Dealing with links in Next.js (blog.logrocket.com)
Jan 02, 2020
In this article, I’m going to explain two of my techniques for isolating routing in your application. I use Next as an example, but they can be applied to pretty much all routing libraries.
  • Radoslav Stankov
How to use the Next.js Router (flaviocopes.com)
Nov 28, 2019
Learn how to use the `next/router` package to control routes in Next.js
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

This is How Routing Works in Next.js (youtube.com)
Mar 27, 2021
In this video, I will show you how routing works in Next.js including pages and routes.
  • Hong Ly
Routing, Linking and Redirecting in Next.js (youtube.com)
Nov 27, 2020
In this video we'll cover a number of ways to send a user to a new page in Next.js. First using the Link component, next imperatively using the Next.js router, and then we'll cover how to create our own Redirect component and how to use Shallow routing.
  • Leigh Halliday
Next.js Router Update: Changes from Next 9.2 to Next 10 (youtube.com)
Nov 17, 2020
In this video we are going to see all the changes that happened in the Next.js Router between all the 9.x versions up to version 10.
  • Bruno Antunes
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
Instagram Style Route as Modal in Next.js (youtube.com)
Apr 23, 2020
This is an example of how to do routing as a modal in Next.js, where when the user clicks a link, content is shown within a modal, but when the user refreshes the page, they are on a dedicated page for that content.
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.
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

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.

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