Hi, I’m Allan Kiche
a Web Developer Graphics Designer WordPress Developer

Understanding Routing using React-Router 6.

React Router is by far one of the most coolest and popular routing library in React. It provides declarative form of routing for react and with the latest postings, its most popular with 48.2k github stars. Other react routing libraries include react-navigation, wouter, reach/router, react-resource-router among others. React router makes it possible for one to view different pages of a website seamlessly. This it does by keeping keeping link clink updated with the website url. This means the web app will immediately render the UI upon execution of the click event without having to make a fresh request from the server.

In this article, I am going to break down everything including the most advanced features. In this first section, we will learn the following

1. What Routing in React is
2. The need of React Router- Its advantages
3. Setting up React Router
4. Configuring routes

The other corresponding features and topics will be covered in the following parts

Prerequisites

1. Basic knowledge of react

2. Understanding of React Hook

What is Routing in React

Routing is the ability of a user to be directed or navigated to different pages and parts of a website upon entering a url or element that is based on their requests and actions. When a user moves from one part of a website to another by clicking elements such as images,links, icon and even button, then that defines Routing.

React Router is therefore used for navigation and definition of the numerous routes that exist on a single page web applications.

2. The need of React Router- Its advantages

The React router as a standard library for routing supports dynamic routing such that we can navigate a single web application without refreshing the page. This prevents the white screen or blank page that is associated with conventional routing thereby creating a seamless user experience. This happens because the url from the event is updated without making fresh request from the server to render the UI. This makes it faster.

3. Setting up React Router

Installation.

To begin using react router, we must first install it using the following commands. This installation should be done after installing reacting in our file structure

yarn add react-router-dom
npm install react-router-dom

4. Configuring routes

In the moment at the src folder, we have the index.js file. The app component is rendered to the DOM. The first step in configuring a router with react router is to connect the URL in the browser with the react application. We therefore use the component <BrowserRouter/> to wrap the entire component. This is how your index.js file should look. By default, App is the highest parent component when dealing with react applications. By wrapping it in BrowserRouter, all power is passed to it as it will pass down all its props to its children.

React Router is a JavaScript framework that lets us handle client and server-side routing in React applications.

In the src folder, create a components folder. Inside the component folder, create two files, Home.js and About.js

By having the two views that render the UI , we can configure the routes. For this, we will need two components from the react-router, that is the <Route/> and <Routes/> components. We will then import it to the app.js component.

Within the Routes component, we define the individual routes with the Route component. On the Route component, we will specify two props — the Path and the Element. Our first path is the root path, which is localhost:3000 and this will be denoted by a forward slash(/). We then tell React what element to be rendered when the URL matches the spot. It will be the home component. Then import it. To configure the second route we set the path to about. We also import it. The route is a self closing tag

The following is what is rendered in both the homepage and about page