A Sneak Peek at React Router Fundamentals

React Router is the popular library used to create routes in React applications. In this article, we will learn the fundamentals of React Router, and how to use it in your React application.

The performance of your front-end application is based on various factors such as smooth navigation, design, page loading speed, amount of data fetched and displayed.

React is the frontend framework for building interactive user interfaces with a robust ecosystem to support it, with tools and an experienced community of developers. React Router is a standard library used with React for dynamic, and client-side routing.

“When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app. That means almost everything is a component in React Router.” — React Training

React Router APIs help you to build single-page web applications with navigational components that compose declaratively with your application.

Fundamentals of React Router

React Router enables the navigation among views of various components in React application, it allows changing the browser URL and keeps the UI in sync with the URL while preventing a page refresh.

React Router keeps the navigation features of traditional navigation on single-page apps, thus preventing page refresh, which is one of the increasingly common ways of providing a seamless user experience.

React Router 5 is the current stable version available, it is fully backward compatible with version 4. It has introduced several structural improvements, including:

• Better support for React 16
• Eliminated all warnings in <StrictMode>
• New context API(internal only)
• Fully automated release

Also, it has introduced some new features in the release, one of them being the ability to use an array in <Route Path>.

(Note: The React Router Version 6 is available in the alpha version-server-rendered Not yet feature-complete).

Let us create a simple React application to understand how React Router works.

React Router enables the navigation among views of various components in React application, it allows changing the browser URL and keeps the UI in sync with the URL while preventing a page refresh.

React Router keeps the navigation features of traditional navigation on single-page apps, thus preventing page refresh, which is one of the increasingly common ways of providing a seamless user experience.

React Router 5 is the current stable version available, it is fully backward compatible with version 4. It has introduced several structural improvements, including:

• Better support for React 16
• Eliminated all warnings in <StrictMode>
• New context API(internal only)
• Fully automated release

Also, it has introduced some new features in the release, one of them is the ability to use an array in <Route Path>.

(Note: The React Router Version 6 is available in the alpha version-server-rendered Not yet feature-complete).

Let us create a simple React application to understand how React Router works.

Getting started with React Router in web app

To get started with the React Router in web applications, you’ll need a React web application. First, install create-react-app and start with the new project.

npx create-react-app demo-app
cd demo-app

1. Install React Router

The next step is to install React Router from the public npm registry with npm or yarn. Since we’re building a web app, we’ll use react-router-dom.

npm install react-router-dom-save

After installing DOM and the react Router components to your application.

2. Add React Router Components

The main components of React Router are,

• BrowserRouter: It is a router implementation that uses regular URL paths to keep your UI in synchronization with the URL.
• Switch: When a <Switch> is rendered, it searches through its children <Route> elements to find one whose path matches the current URL.
• Route: Route is the conditionally shown component that renders some UI when its path matches the current URL.
• Link: The link component is used to create links to different routes in your application and implement navigation around the application.

Now open your project directory in the editor to add React components to your application and add the below code to the app.js file.

import {
BrowserRouter as Router,
Route,
Link,
Switch
} from ‘react-router-dom’;

To use React Router first create three functions named home, about, and services. Now, add the following code to each function.

home()

function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}

about()

function About() {
return (
<div>
<h2>About</h2>
</div>
);
}

services()

function Services() {
return (
<div>
<h2>Services</h2>
</div>
);
}

Finally, it’s time to add React Router components to your React app.

BrowserRouter: Add BrowserRouter aliased as Router to your app.js file to wrap all the other components.

import React from “react”;
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from “react-router-dom”;

Link: Add links to our components. The link component uses the to prop to describe the location where the links should navigate to.

When you run your application, you will find that the URL will change according to the value to props of the link components.

Route: The route component enables you to set up a link between the component’s UI and URL. To add routes to your application, add the code given below to your app.js file.

Once Your components are linked, clicking on any link will render the components associated with it.

export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to=”/”>Home</Link>
</li>
<li>
<Link to=”/about”>About</Link>
</li>
<li>
<Link to=”/services”>Services</Link>
</li>
</ul>
<hr />

Switch:

You can render a single component by wrapping all the routes inside the Switch Components. Switch groups together several routes, and iterate over them to find the first one that matches the path. Once the match is found the corresponding component to the path is rendered.

<Switch>
<Route exact path=”/”>
<Home />
</Route>
<Route path=”/about”>
<About />
</Route>
<Route path=”/services”>
<Services />
</Route>
</Switch>
</div>
</Router>

3. Final source code:

Here is the final source code after adding React Router Components

import React from “react”;
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from “react-router-dom”;
// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
// Although the page does not ever refresh, notice how
// React Router keeps the URL up to date as you navigate
// through the site. This preserves the browser history,
// making sure things like the back button and bookmarks
// work properly.
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to=”/”>Home</Link>
</li>
<li>
<Link to=”/about”>About</Link>
</li>
<li>
<Link to=”/services”>Services</Link>
</li>
</ul>
<hr />
{/*
A <Switch> looks through all its children <Route>
elements and renders the first one whose path
matches the current URL. Use a <Switch> any time
you have multiple routes, but you want only one
of them to render at a time
*/}
<Switch>
<Route exact path=”/”>
<Home />
</Route>
<Route path=”/about”>
<About />
</Route>
<Route path=”/services”>
<Services />
</Route>
</Switch>
</div>
</Router>
);
}
// You can think of these components as “pages”
// in your app.
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Services() {
return (
<div>
<h2>Services</h2>
</div>
);
}

When we click on the links and navigate to different components, React Router keeps your application UI in synchronization with the URL.

Home page:

About Page:

Service Page:

This is a simple example of how we can implement navigation in the react application using React Router.

Here we have learned the basic fundamentals of React Router, its components, and how we can use React Router in web applications. Hope you like this article.

The role of DhiWise

DhiWise is an intuitive app development platform, designed and developed to empower developers for building high-quality web and mobile applications.

Its advanced features enable developers to build a scalable application faster. It provides support for the most popular development technologies which include,

• React.js
• Node.js
• Flutter
• Laravel
• Android
• iOS
• Mongo.DB

And more technologies are in the pipeline.

So, what are you waiting for? Start using DhiWise to simplify your app development.