A Comprehensive Guide to Using React Router V6 in React Apps

React Router is an open-source application programming interface
(API)/standard library for Routing in React apps. It helps routers create and
navigate among different website URLs that build your web app.

They are for simplifying site navigation and enabling users to roam between
the components of a web application while preserving the state.

React Routers use dynamic and client-side routing; everything is a component
in React Router while your app is rendering.

It helps support creating a single-page web application (SPA) while requiring
no page refreshing when the user navigates.

These Routers can also provide unique URLs for all active web app components,
making them more shareable.

For example, a white screen flash or blank page scenario is avoided by
preventing a page refresh and using Router or Link.

All in all, a React Router makes use of a component structure to call on
components that display the information appropriate/adequate for users.

Let’s explore this hot topic of using React Router V6 library (still in its
beta phase) so that you can smoothly incorporate it into your React app. This
comprehensive guide will also give you a peek into what new features are in
its latest version, like the change in its size from 9.4kb to 2.9kb, which is
a -70% reduction in its bundle size. But before that, scroll down to see what
else this guide has for you –

• What is a React Router?
• What is the fundamental purpose of using React Router?
• Is React Router a framework?
• Essentials for Routing in React
• Getting Started with React Routers
• Various Packages in React Router Library
• Building your first route with React Router V6
• How to add a navigating menu?
• Handling nested routes
• Accessing dynamic and URL parameters of a route.
• Does something happen while navigating TWO routing systems?

What is a React Router?

A React Router is one of the increasingly common ways to provide a more
seamless user experience (UX) to people visiting web apps.

React Routers allow people to use a web browser’s functionalities like
clicking on the back button and refreshing the page while keeping the view of
the application in its correct state.

What is the fundamental purpose of using React Router?

The React Router enables the navigation among views of various components in
React Apps, allowing changing URLs in a browser and keeping the user interface
in sync with those URLs.

Is React Router a framework?

ReactJS Router has been a popular routing web framework for React since its
launch. The best part of this framework is that it comes with a beautifully
designed library of intuitive components.

The React router allows devs to build a declarative routing system for a React
app, enabling you to declare exactly which of the members has a specific
route.

Essentials for Routing in React

To take the full advantage of this comprehensive guidepost
, kindly make sure you have the following essentials installed on
your system:

• Need of a development environment running Node.js (version >= 12. x.x). To install it on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js , npm/npx or yarn, and VS Code for the local development environment on Windows macOS and Ubuntu.

• Requirement of a React development environment set up along with a React App .

• You’ll need basic knowledge and hands-on JavaScript , ReactJS, React Hooks, HTML, CSS, Build a Website with CSS series, and How to Code it in JavaScript.

Getting Started with React Routers

To get started with React Router, you first need to create a new React app
using the following command on the terminal window –

It is to generate the project directory. After that, navigate inside the
project directory, and install the required dependencies to add React Router
v6 library.

When the dependency is with you, open the package.json file in your
favorite code editors like Sublime Text or
Atom or the default text editors from the particular OS. Once that’s over,
you will see the dependency version of the react-router-dom library, as
shown below –

Various Packages in React Router Library

React Router library comes with three different packages concerning npm, and
each has its purpose –

• react-router-dom
• react-router
• react-router-native

The react-router package is for peer dependency to the other two packages
mentioned above.

For React apps, the react-router-dom package is used for routing. And the
react-router-native comes with bindings that ones use for developing React
Native apps .

Now that you almost have the necessary things, let’s create the first route.

Building your first route with React Router V6

Start by creating the first route using React Router library, and then open
the src/App.js file . And when that file is open, add the import statement
to pull things from the library –

It is the first component that you’ll import from the react-router-dom
library. You need to do it since you will require to wrap various routes into
a single one. And to keep track of the history of routes in the React app, it
uses the HTML5 history API.

Also, the Router part in the above snippet is the alias that enables you
to write the code quickly. So, it’s in the recommendation to import it and put
it at the top-level component in the component hierarchy of a React app –

Now, once that’s over, it’s time now to import the next component from the
react-router-dom , the new Routes –

The above one is an upgrade to the previous switch component. Thus, it
includes –

• Relative routing
• Linking features
• Automatic route ranking
• Nested routes, and
• Layouts.

And the last needed component from the react-router-dom is Route
(responsible for rendering the UI of a React component).

Why?

Because it has a prop named as a path that matches the app’s current URL, and
the second prop is the element that invokes the Route component the moment it
encounters an existing URL and tells it – which React component is for
rendering.

Note: The element keyword here is a new addition to the V6 version of
the React Router. Earlier, you would be using the prop called component in its
V5 version.

Hence, to build the first Route, create a primary functional component called
Home that returns some JSX –

Once the above component is ready, update the App function using the route below. The best part of this V6 library of React Router is
that the element prop of a Route component now gives access to pass a React
component rather than merely mentioning the React component’s name. It makes
it easy for devs to pass props down the routes, as shown below:

So, to observe it working before you, head back to the terminal and begin the
development server using the command yarn start.

Then, visit the URL (upon which you have hosted the project) like this one
in your browser window.

Look at the output once the above step is over:

Now, let’s quickly make another function component – About. Its rendering
begins when the URL in a browser is – /about; the out
is shown below after that step:

Next, add the Route to the About component like this:

Now, again head back to your web browser and visit the About URL -
/about:

How to add a navigating menu?

To navigate over a particular route inside the React app or the two existing
routes, you would need to add a minimal navigation bar using the Link
component from the react-router-dom .

Thus, start by importing it like this:

Use an anchor tag like the below one to navigate between different web pages
in HTML:

This approach in a React app will lead you in developing to refreshing a web
page whenever the rendering of a new view or page itself begins.

**Remember, ** it isn’t any advantage you are looking for while
incorporating a library like React. So, to steer away from refreshing the web
pages, the react-router-dom library comes with the Link component.

Now, let’s get inside the App function component and create a navbar like the
one shown in the below code snippet:

Next, go back to the web browser to see how the navigation bar is working:

Handling nested routes

The concept of Nesting in routes is quite essential to understand. Because
generally, devs assume that an inevitable part of a web page remains constant,
and only the child part changes.

For instance, while visiting a simple blog on a website, the blog’s
title is always displayed, and then a list of other/related blog posts is
shown right beneath it. However, the moment you click a blog post, the list
gets replaced by the contents or the description of that particular blog.

It is an example of how the latest version of the React Router handles nested
routes. But in the React Router v5, there were options to define them
explicitly, and it is not the case in any of the latest version(s).

The latest version picks one of the best elements from the React Router
library – Outlet. It is to render any matching children for a specific route.

Hence, to jump-start, begin by importing the Outlet using the react-router-dom
library as mentioned below:

If you have a crazy idea like mimicking a primary blog, add a few mock data in
the App.js file. Below is the code snippet that has an object – Blog-Posts.
This object will further consist of various objects as properties. And every
object has the following three things – a unique slug, its title, and the
description of a blog post –

You will get to use this unique slug in the URL of a browser to see the
contents of each post.

Thus, your next task would be to create a function component – Posts that will
display a list of all blog posts:

Now, similar to About, Define another component – PostLists. It will display a
list of all posts when the URL in the browser is -
/posts .

So, to have this, you would need to use JavaScript’s Object.entries() method
to return an array from the object – BlogPosts. This array gets mapped to
display a list of titles in all blog posts:

Next, make modifications in the Routes of the App function component like
this:

Now, if you observe, all it indicates – whenever there is a trigger in the
URL; /posts , the list of blog posts will render.
Hence, the component PostsLists –

Accessing dynamic and URL parameters of a route

So, to open the individual posts by hovering your cursor over the blog posts
and clicking the one you like the title of from the rendered list, all you
need is to wrap up the title of each post inside a Link component in the
PostsLists component.

Next, define a path to every post using each post’s slug. Here, /posts/ prefix
is for the path that will keep the web browser to be consistent –

Next, you need to import a hook – useParams using the react-router-dom
library. It will allow you to access any dynamic parameter that a specific
route (or slug in our example) might have.

The title and the description of each blog post are based on the slug
component. The need to access them comes whenever there’s a trigger in the
post related to that URL to display the content:

Once you have imported the hook, it’s now time to create a new function
component – Post. This particular component will hook the current slug of the
post from useParams . After that, create a new post variable with the
value of the properties or contents of a blog post. And you can use rendering
to de-structure the contents of this post variable:

And lastly, to render the contents of each blog post, all you need to do is to
add a dynamic route: slug in the App function component:

Here is the net output for the above handwork:

Does something happen while navigating TWO routing systems?

An API enables the talk between a piece of code to another part of code and
nothing else. It is not external where you pass some value and get the output.

A full-fledged working software (a web app or a mobile or desktop app) has the
front-end and backend code. And with the help of an API, they communicate to
provide users with their queries.

Thus, when devs write codes for both ends, they potentially write them in
multiple languages that may not necessarily have the same routing rituals, but
don’t worry! Because the backend works as an API, and the user doesn’t have to
interact with it.

And that’s where the routing comes to the rescue. They manage the UX and allow
you to know how to address queries to the database that are not the same.

At the end of the day!

Hopefully, this comprehensive introductory guide will help provide you with
the necessary ingredients while learning to implement the React Router in
your app for the first time.

And suppose you’re already aware of the previous versions of the React Router
library. In that case, I hope this guiding post makes you familiarize yourself
with an overview of the changes between the latest version and its previous
ones.

The source code for this routing library is available at this GitHub
repository.