---
title: "A Comprehensive Guide to React Router | CoderPad"
description: "In other JavaScript frameworks like Vue, the routing logic is built by the same team that works on the core framework, meaning that we don't need an externally written package or dependency. In React, there is no official package to handle routing; instead, we depend on the most popular and standard library, React Rout"
canonical: "https://coderpad.io/blog/development/guide-to-react-router/"
last_modified: "2023-06-05 14:12:12"
---
[Back to blog](https://coderpad.io/blog/)
# A Comprehensive Guide to React Router
August 31, 2022 12 Minute Read
By Joel Olawanle
[Development](https://coderpad.io/blog/development/)
Navigation routing in React is quite different from how it’s done in web development using the HTML anchor tag. This is because React is used to build single-page applications—meaning our application only loads once in our browser. This means we need a routing mechanism or logic to handle all forms of routing.
In other JavaScript frameworks like Vue, this routing logic is built by the same team that works on the core framework, meaning that we don’t need an externally written package or dependency. In React, there is no official package to handle routing; instead, we depend on the most popular and standard library, React Router.
React Router allows the browser URL to be changed and ensures the UI is in sync with the URL. It was built by [Ryan Florence](https://twitter.com/ryanflorence) and [Michael Jackson](https://twitter.com/mjackson), who founded [Remix](https://remix.run/) to take React Router to the next level. They recently launched [React Router version 6](https://reactrouter.com/), whose usage has grown massively over the past year with over [8 million weekly downloads](https://www.npmjs.com/package/react-router-dom) at the time of writing. Today, React Router is maintained by [Remix](https://remix.run/) and [hundreds of other contributors](https://github.com/ReactTraining/react-router/graphs/contributors).
This guide will teach you how to use React Router within your React project. We will learn how to implement React Router to ensure smooth routing within our single-page application. At the end of this guide, we will shed light on the future of React Router and how Remix plans to re-shape routing with React Router in future versions.
In this article, we will learn how to:
- [Install React Router](#install-react-router)
- [Setup and Access Browser URLs](#set-up-and-access-browser-url)
- [Configure and Create Routes](#configure-and-create-routes)
- [Access Configure Routes](#access-configured-routes)
- [Handle Routes without Matches](#handle-no-routes-without-matches)
- [Implement Nested Routes](#implement-nested-routes)
- [Configure Parameter-Enhanced Routes](#configure-parameter-enhanced-route)
- [Implement Programmatic Navigation](#implement-programmatic-navigation)
- [Code Splitting with React Router](#code-splitting-with-react-router)
- [The Future of React Router](#the-future-of-react-router)
## Install React Router
React Router is an external library that needs to be installed into our React application for us to use. We can do this by running either of the commands below in our terminal within our project’s directory:
```
// Using npm
$ npm install react-router-dom@6
// Or
// Using Yarn
$ yarn add react-router-dom@6Code language: JavaScript (javascript)
```
When we install the React Router package within our project, we will have access to all its components and hooks; we can now use these hooks and components within our application to enable single-page routing.
Once we have successfully installed this package, we can check our`package.json`file to confirm if it installed, and which version we have installed, within our`dependencies`object:
```
"dependencies": {
// rest of the dependencies installed
"react-router-dom": "^6.3.0",
},Code language: JavaScript (javascript)
```
## Set Up and Access Browser URL
To use React Router within our application, we need to wrap the top-level component in our React applications component hierarchy, also known as the root component (`App.js`), with`BrowserRouter`.
`BrowserRouter`is a router implementation that uses the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API), which comprises the [`pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)`,` [`replaceState`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState)`, and` [`popstate`](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) events. This History API helps track route history, keeping our UI in sync with the URL.
To wrap our root component, we can do this in the`App.js`or`index.js`file. First, we would import`BrowserRouter`from`react-router-dom`in any of the components we wish to wrap. Let’s do this in our`index.js`file:
```
// index.js
// other imports
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);Code language: JavaScript (javascript)
```
If we want to do this in our`App.js`file, we just need to ensure that everything in our`App.js`file is wrapped with``:
```
// App.js
import { BrowserRouter } from "react-router-dom"
const App = () => {
return (
{/* ... */}
);
};
export default App;Code language: JavaScript (javascript)
```
## Configure And Create Routes
We need to configure our routes to implement routing between components in our React application. Not all components will be a view (or rather, a page), so we need to declare which component is a view and assign a path to each.
We do this with two major components, which are:
– [`Routes`](https://reactrouter.com/docs/en/v6/components/routes): This is the parent component that wraps all our`configuredRoutecomponents.`This component is what React looks for when the location changes to access its children``elements to find the best match and render that branch of the UI.
– [`Route`](https://reactrouter.com/docs/en/v6/components/route): This is the component used to declare a specific location. It holds two props which are the path and element props. The path props hold the path we would use to access the specified element. The element can be a markup or a component.
Suppose we have three components (Home, About, and Blog). Let’s configure routes for them in the`App.js`file:
```
// App.js
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Blog from './pages/Blog';
const App = () => {
return (
);
};
export default App;Code language: JavaScript (javascript)
```
In the above, we created a route with a parameter value of`id`. This value can be any string. For us to access this page and load up this page on our UI, the user will need to navigate to a URL like`/blog/1`. We can replace`1`with any string, and the page will load up.
Our path can be anything based on how we want it or the parameter we want to pass to the`SinglePost`component. We can have as many parameters as`/blog/:category/:id`.
Note: Adding a colon before the path name shows that the value is a parameter.
We fetched an array of`blogposts`on our blog page from a local data file. And then added a link that passes in the ID to the path dynamically:
```
import { Link } from 'react-router-dom';
import posts from './data';
const Blog = () => {
return (
Blog Page
{posts.map((post) => (
{post.title}
{post.body}
Read More
))}
);
};
export default Blog;Code language: JavaScript (javascript)
```
Let’s now see how we can fetch this URL parameter and use it to query for data within our component.
### Get URL Parameters With useParams Hook
At this point, when a user navigates a route with any`ID`, the page shows up, but we want to get this parameter (ID) and use it to fetch the particular blog post the user wants to see. We do this with the [`useParams`](https://reactrouter.com/docs/en/v6/hooks/use-params) hook.
The`useParams`hook gives us access to an object containing all the parameters we have passed using the path name as the object key. For example, if our path is`user/:id`, our object will be`{id: 4}`.
To use the`useParams()`hook, we first import it from`react-router-dom`and then get our data. In our case, we will destructure to get the`id`right away:
```
import { useParams } from 'react-router-dom';
import posts from '../data';
const SinglePost = () => {
const { id } = useParams();
return (
// ...
);
};
export default SinglePost;Code language: JavaScript (javascript)
```
We can now query for the specific post we want to showcase with the`id`param. Depending on how we are fetching our data, we might have to perform an HTTP request if it’s an API, but since we are using a local data file, we just need to find which posts`id`will match the`id`parameter:
```
import { useParams } from 'react-router-dom';
import posts from '../data';
const SinglePost = () => {
const { id } = useParams();
const post = posts.find((post) => post.id == id);
const { title, body } = post;
return (
{title}
{body}
);
};
export default SinglePost;Code language: JavaScript (javascript)
```
## Implement Programmatic Navigation
Programmatic navigation can be seen as the process of navigating or redirecting a user based on specific actions. For example, if a user clicks a button, signs in or signs out, or submits a form.
In React Router, this done with the [`useNavigate()`](https://reactrouter.com/docs/en/v6/hooks/use-navigate) hook.
### Implement Programmatic Navigation With`useNavigate`Hook
The`useNavigate()`hook allows us to perform all forms of programmatic routing, such as navigation redirects and lots more.
To use this hook, we would first import it from`react-router-dom`and then initialize the`navigate`method, so we can use it on any button or perform all forms of programmatic navigation.
```
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();Code language: JavaScript (javascript)
```
Let’s start by seeing how to navigate backward when a button is clicked:
```
Code language: HTML, XML (xml)
```
We can also access a route programmatically:
```
import { useNavigate } from 'react-router-dom';
const Blog = () => {
const navigate = useNavigate();
const naviagteHome = () => {
navigate('/');
};
return (
Blog page
{/* */}
);
};
export default Blog;Code language: JavaScript (javascript)
```
The navigate hook also makes it possible to pass state values via these routes, which can be retrieved with the`useLocation()`hook.
```
navigate("/blog", {state: {authorDetails}});Code language: JavaScript (javascript)
```
And just like we did earlier, we can access these state data via the`useLocation()`hook:
```
import { useLocation } from "react-router-dom";
/*...*/
const location = useLocation();
const authorData = location.state;
console.log(authorData);Code language: JavaScript (javascript)
```
## Code Splitting With React Router
When React applications and other SPAs load the initial landing page for a user’s request it simultaneously loads the code for every other page as well, leading to a massive bundle size and a poor user experience. Code splitting allows us to break down our application so that only needed components are loaded.
When we implement code splitting with React Router, our application will only load the components we have routed. We can do this with [React.lazy()](https://reactjs.org/docs/code-splitting.html#reactlazy) and [React.Suspense](https://reactjs.org/docs/react-api.html#reactsuspense).
The function`React.lazy()`enables us to render dynamic imports similarly to normal components. In contrast,`React.Suspense`enables us to specify the fallback prop, which takes placeholder content that would be used as a loading indicator.
For example, let’s implement lazy loading in our Routes configuration by using just a few routes in the`App.js`file:
```
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Blog = lazy(() => import('./pages/Blog'));
const App = () => {
return (
Loading...
}>
} />
} />
} />
);
};
export default App;Code language: JavaScript (javascript)
```
## Remix: The Future of React Router
On March 23rd 2022, [Ryan Florence](https://twitter.com/ryanflorence) published an article on the Remix blog, “ [Remixing React Router](https://remix.run/blog/remixing-react-router) ”. This post contained a lot of downsides the current React Router has and how they have started [upgrading the current package to include some remix actions](https://beta.reactrouter.com/en/dev) to solve these problems.
Currently, we fetch data within our components, but most of the time, we want the data to load up immediately after our application renders. This means that we perform a render+fetch request. This definitely will slow down our page load time and affects user experience (UX). When performing these render+fetch requests in nested components, your app is likely to become slow.
Here is an example from the [blog post](https://remix.run/blog/remixing-react-router), if we have nested routes in which each component fetches data from a server:
```
}>
}>
} />
Code language: JavaScript (javascript)
```
In a situation whereby the`Root`component requests to get the user details, the`ProjectList`component requests to get the project lists of the user, and then the`ProjectPage`component requests to get a single project with its details based on the passed`Id`. Performing all these requests one-by-one would take longer than having to perform all these requests at once.
Instead of 3 assets loading one-by-one, 1 second at a time, within 3 seconds, they can all load simultanously in 1 second. Image by Ryan Florence
In the future version of React Router, which is currently being [released in development mode](https://beta.reactrouter.com/en/dev), many changes and improvements are coming, all intending to improve user experience. When it comes to data fetching, data will be fetched when declaring routes and passed into the components to consume immediately using the`useLoaderData()`hook.
```
}
loader={async ({ signal, params }) =>
fetch(`/api/projects/${params.projectId}`, { signal })
}
/>
Code language: JavaScript (javascript)
```
We will consume the data in our application this way:
```
let data = useLoaderData();Code language: JavaScript (javascript)
```
You can [read more here](https://remix.run/blog/remixing-react-router) and watch the [recent talk by Ryan Florence](https://www.youtube.com/watch?v=95B8mnhzoCM) at the [Real World React](https://www.youtube.com/c/RealWorldReact) conference.
## Wrapping Up
In this guide, we have learned much about React Router Version Six and how it works to help us implement single-page routing in our React applications. We also learned how the next version of React Router would help make the user experience better and faster.
Thanks for reading, and have fun coding!
I’m Joel Olawanle, a frontend developer and technical writer interested in making the web accessible to everyone by always looking for ways to give back to the tech community. Follow me on [Twitter](https://twitter.com/olawanle_joel).
## Subscribe for more CoderPad insights
## Trending Articles
Previous slide Next slide [Development
## What is Prompt Engineering?
Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.
Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development
## A Guide To Using React’s useCallback() Hook
Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.
Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development
## MySQL vs. PostgreSQL: How Do They Compare?
A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.
Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development
## PostgreSQL LIKE Operator: A Detailed Guide
When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.
Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development
## How To Use DataProvider In TestNG With Examples
When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.
Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development
## How To Get Up And Running With Django Migrations: A Guide
Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.
Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development
## Writing A Parameterized Test In JUnit With Examples
A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.
Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development
## How To Use Assert In JUnit With Examples
The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.
Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development
## A Simple Guide To TypeORM: What It Is And How To Use It
Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.
Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development
## Using PreparedStatement in JDBC With Examples
In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.
Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development
## React vs React Native: The Differences Explained
React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.
Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development
## Logging in Django
The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.
Read the post](https://coderpad.io/blog/development/logging-in-django/)
## Hire with confidence.
See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.
[Request a demo](https://coderpad.io/sales/)