How is React Router different from Conventional Routing?

Table of contents

No heading

No headings in the article.

Firstly we will see an introduction to ReactJs :

Basically react is not an framework its an framework which was developed by Facebook on 29 May 2013 to solve the problem of rendering every time when the page was reloaded which slows down the speed of browsing. Let's understand it more with an example. Imagine using Facebook and liking the post's you like. You see that when you hit the like button the count of likes increases on that particular post without reloading page which is example of good UI/UX that's because of react's component based approach only which renders only that part of your page which is reloaded. In layman language a react application is made of components which are reusable piece of html.

To create a new react project:

npm create-react-app react_app_name

For running react-app on browser write:

npm start

OUTPUT:

1.png

What is Routing?

Routing is an important part of web development which ensures the flow of web pages and makes an application feasible and easy for client requests. Routing depends on the framework/language which you are using for making your application. Like in react we use react-router-dom for routing in our application.

Types of Routing :-

(1) Conventional Routing

(2) Client-Side Routing

(1) Conventional Routing In our web application there are links provided in navbars and buttons, with the help of these we can visit different web pages. When user clicks on such links the view on display changes and URL(uniform resource locator) also changes.

The structure of URL is as follow:

2.png

With every click on links or buttons the path name changes e.g path2,path3,etc.

When the path changes the request goes to server which searches for the pathname and return the page corresponding to it. When this happens the complete page reloads which takes time and this is known as conventional routing. By doing this unnecessary data also gets refreshed. For example of we want to change only the button color for which we are reloading the full page because when request goes to server it returns a complete page.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Conventional Routing</title>
    </head>
    <body>
        <a href="https://practice.geeksforgeeks.org/">Click here to go to gfg practice</a><br>
        <a href="https://www.geeksforgeeks.org/">Click here to go to gfg articles</a>
    </body>
</html>

(2) Client Side Routing (React Routing) In client side routing the request given through clicking links or buttons for routing is not sent to server but instead JavaScript itself handles the request for routing.

This type of routing is popular among "single page applications" where the complete html page is divided into components.

How Does this work?

Change in URL is detected by JavaScript code. A change means that the view will also be changes. Change is displayed by updating the component or displaying new component. The whole page is not refreshed only the component needed to be changed is updated. So, this type of routing doesn't refresh the whole page. How to download react-router?

We need to download react-router package for enabling routing in our react application, which we can download from npmjs.com. First search react-router-dom and copy "npm i react-router-dom" and paste it in your CLI.

npm i react-router-dom

React-Routing is a library which provides smooth routing by using switch, routes and most important history stacks.

It displays the component matching to the URL. By using this react conditionally renders components without disturbing the component.

React-Router has different packages which makes it easy for developers to update the app state and correctly display the UI component.

(1) BrowserRouter - It is the base of routing which uses HTML5 history API. It adds ability to route the components.

The correct way to use BrowserRouter is shown below, open your index.js file and do the following :-

3.png

(2) Switch - The next most important function is switch. The path given in URL is given to switch, it matches it with all routes and the first matched component is rendered.

(3) Route - Route is used inside switch, it contains all the path routes which are to be rendered. It displays the UI whose URL matches.

(4) Link - Link tag provides us same functionality as of anchor () tag. It prevents us from using anchor tag which sends request to server and reloads the whole page. The change in URL is listened by history stack and and request is passed for further routing.

Code for react routing is shown below :-

(1) Open your app.js file

4.png

Using and tag (2) Create files such as given in above image e.g Supplier.js,customer.js,revenue.js and etc.

(3) Create a file name and write the code given below in making for making navbar and to function routing in it

Javascript

import React from "react";
import { NavLink } from "react-router-dom";


function Nav() {
  return (
    <div>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
          data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
          aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <NavLink exact to="/supplier" className="nav-link" 
                activeClassName="active_class" aria-current="page">Supplier</NavLink>
              </li>
              <li class="nav-item">
                <NavLink exact to="/customer" className="nav-link" 
                activeClassName="active_class">Customer</NavLink>
              </li>
              <li class="nav-item">
                <NavLink exact to="/revenue" className="nav-link" 
                activeClassName="active_class">Revenue</NavLink>
              </li>
              <li class="nav-item">
                <NavLink exact to="/catalogue" className="nav-link" 
                activeClassName="active_class" tabindex="-1">Catalogue</NavLink>
              </li>
              <li>
                <NavLink exact to="/message" className="nav-link" 
                activeClassName="active_class">Message</NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  )
}

export default Nav;