This video is available to students only

Introducing React Router

React Router is a routing and navigation library that bolts onto to React. We'll explore what it is and how it works.

Introducing React Router#

React Router is generally the go-to choice for devs looking to implement a solid navigation system into React. It’s an open-source product of the React Training team which features some impressive and well-known figures in the developer world, including Ryan Florence, Brad Westfall, and Cassidy Williams.

The React Router library is but one of several choices out there (and I’d always encourage you to review your options and make the right choice for you and your project), but arguably very few of them are as battle-tested and easy to implement.

React Router has been around for quite some time. It’s very robust and proven to work in just about any project scenario, playing well with different projects types, keeping out of your way and allowing for a very flexible implementation. What’s more, it has excellent developer docs and I’d recommend you explore them as soon as we’re done with our upcoming routing demo.

When to use React Router#

As we’ve already seen in the previous lesson, as soon as your app starts to grow to even a moderate size and complexity, swapping out components using some sort of state value isn’t going to cut it.

With React Router we get access to a superb routing system that primarily relies on the native HTML history API to provide access to browser history, as well as a host of other convenient and helpful features:

  • Location history

  • Hash-routing to enable navigation by URLs containing (‘#’) hashtags

  • Integration with Redux (which we’ll explore in a later module)

  • Static routes

  • Parameterized URL routing for URLs such as /user/:userid where the :userid part is dynamic and unknown

  • Non-matching or 404 route handling

  • Support for complex, layered navigation such as in sub areas and layouts

You may never need to use many of the features that React Router offers, but it really does cater for any routing scenario you can throw at it. Getting to know the far ends of React Router is a course in itself, so for now, we’ll be focusing on the main elements you need to employ React Router in your app and make it work.

Note: as wonderful as React Router is, for simple projects or those that don’t require complex routing or features such as dynamic URL parameters, you may not need anything more than React offers you out-of-the-box. It can be tempting to use something like this even when there’s little need for it, so assess your project’s needs before you add a helpful library such as React Router; you may not need the additional complexity or code weight.

Using React Router#

In order to use React Router, we first need to install it into the project (which we’ll do in the upcoming lessons as we build our demo), and then, for basic use, we’ll be concerned with three main elements:

  1. BrowserRouter

  2. Link or NavLink

  3. Route

They each play a vital part in the routing landscape, so let’s briefly walk through each one to see how it works and what role it occupies.

BrowserRouter#

Browser router code snippet
 

This page is a preview of Beginner's Guide to Real World React

No discussions yet