React library is a great tool for building UIs. However, it’s not enough to build fully functional web applications. For one, it does not have routing – you can not set up functional navigation using React alone. For that, you need to install an external library called React Router. Nearly all React developers use this library. If you’re learning to write web applications in React, then learning React-Router is a must. It is likely to come in handy when you start on a real job as well.

You have probably noticed that different pages on certain apps load almost instantly. This is not magic, it’s called Single Page Applications, where everything you need to see is loaded at once. Then you are just ‘focused’ on various parts of the page. React Router makes it possible to go from one page to another, and change what you see depending on your navigation between different pages.

In this tutorial, you are going to learn fundamentals of how to do routing in React, including: what routing means, react-router DOM, and all the important custom components and hooks from the react-router library.

Routing

In simple words, routing is the ability to go from one page to another. It is not exclusive to single page apps (SPAs) but it is different in SPAs. In normal websites or web applications, the browser loads different files from external server and renders the new page. In SPAs, everything is already loaded, and browser simply shows you what you need to see for that specific route.

Routing includes basic navigation features – links to other pages on the same website, buttons that perform an action and redirect you to another page, and so on. All of this is included in routing.

The foundational principle of routing is matching of URLs. As a web developer, you define patterns for URLs and specify components that need to be shown to users if URL fits a specific pattern. URLs can have dynamic elements in them, like name of the product.

What is React Router DOM

To understand what is React Router DOM, first you need to know that React is used to build applications for browsers as well as native applications for smartphones. React-Native is, in a lot of ways, similar to React, but it’s used for building native apps for mobile phones.

Then what makes the React Router DOM different is its focus on web applications. It’s a significant portion of the entire react-router library dedicated specifically for building web apps. This doesn’t mean that apps with react-router DOM navigation can not be used on mobile phones. Mobile users can still navigate apps that use React Router DOM, as long as they use browsers in their phones. Native apps are entirely different, and navigating them requires use of other elements from React Router library.

Important Custom Components for Routing in React

React library is based on reusable components. Naturally, react-router library also provides a lot of important functionalities via custom components. You can import BrowserTouter, Route, Switch, Link, and other custom components. In fact, you need many of these custom components to set up a navigation in your app.

It’s easy to think of these custom components as being in three different categories: one is routers like <BrowserRouter>. This custom component works with browser’s history interface to adopt many of the important functionalities like pushState and replaceState for your react app. In order for all other components to work, the component tree must be wrapped with <BrowserRouter> component, as it provides important navigation features that are foundational for your React app.

Another category is that of route matchers, components like <Route> and <Switch> that are used to match routes with components, so React knows which components to display for a specified route. The <Switch> component is like switch case statement in JavaScript. It renders the first route that matches the specified pattern. It is best used if there are multiple patterns that might match the route.

Finally, the third category is that of navigation. This category includes custom components like <Link> and <Redirect>. The Link component is like <a> tag in HTML, as in it creates a link to another page, except it is compatible with SPA design. Unlike normal anchor tags in HTML, Link components simply take users to the specified URL and do not reload the page. The Link component accepts to prop to specify the relative path to navigate to. But that's not the only thing you can do with <Link>. This article goes into depths on how to set onClick event handler on custom <Link> component.

Next, let’s move to important custom hooks in react-router.

useHistory, useParam, useLocation hooks

useHistory taps into browser’s native History API and gives you instance of history object. You can work with this instance to programmatically change the URL and perform many other useful actions for navigation. You can also access the history object to go back to previous page in React, or to redirect to another page in React.

URLs can have parameters in them. You broadly define the pattern and then the route component renders components depending on their parameters. useParam is another important hook that returns custom parameters for a specific instance of a rendered component. Access to search parameters can be useful to retrieve specific information about any specific instance of a component.

Finally, the useLocation hook return the latest URL in response to changes in the URL.

Final words

In this guide we walked you through most important custom components and hooks in react-router, and different roles these features play in building a navigation for your React app.

If you’re a beginner, a solid grasp on these concepts should give you a nice foundation, but it’s nowhere enough to implement navigation for complex apps in the real world. For that, you will need experience of building apps. In my personal opinion, SimpleFrontEnd is a great place to start your learning journey.