Routing In React

In this series, We are discussing basic react js concepts. This article is about react routing and how to use routing in react applications.

Introduction

This is the fifth article of the basic react js series. In this article, We will learn what is routing and how to implement routing in react applications, Routing helps us to navigate and load various components on the page. it is not redirected or refreshed the whole page, it just loads the component on the page that we want to load. For the implementation of routing, we need to install the routing package by using the below command.

npm install react-router-dom

Once the npm routing package is installed successfully in our application. Now we create some components to navigate and load on the page.

Now we have created the Home.js component and written the below code. This component loads as a default.

Home.js

import React from "react";

function Home()
{    
    return (
        <div className="main">
        <h1>Welcome to Home Component  </h1>          
        </div>      
    );
};
  
export default Home;

Let's create the About.js component and write the below code. In this component, we will check how to get parameters from the link by useParams hook which passed from the route path.

About.js

import React from "react";
import {useParams} from 'react-router-dom';


function About()
{    
    const params = useParams();
    return (
        <div className="main">
        <h1>Welcome to About Component id - {params.id} </h1>          
        </div>      
    );
};
  
export default About;

Let's create one Contactus.js component and write the below code. In this component.

Contactus.js

import React from "react";

function Contactus()
{    
    return (
        <div className="main">
        <h1>Welcome to Contactus Component </h1>          
        </div>      
    );
};
  
export default Contactus;

We have created one more page not found a component that loads when the path is not found.

Notfound.js

import React from "react";

function Notfound()
{    
    return (
        <div className="main">
        <h1>Page Not Found </h1>          
        </div>      
    );
};
  
export default Notfound;

Now we have to import BrowserRouter, Routes, Route and link from react-router-dom which helps us to map create links and map the with specific path to load components. The link we are used to creating links and route we gave path and in the element pass component which we want to load.

App.js

import './App.css';
import Home from './Home';
import About from './About';
import Contactus from "./Contactus";
import Notfound from './Notfound';
import { BrowserRouter as Router,Routes,Route, Link }  from 'react-router-dom';

function App() {
  return (
    <div className="App">

    <Router>
      <Link to="/" >Home</Link> | 
      <Link to="/about/1/" > About</Link>  |
      <Link to="/contactus" > Contact us</Link> 

      <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/about/:id/" element={<About />} />
      <Route path="/Contactus" element={<Contactus />} />
      <Route path="*" element={<Notfound />} />
      </Routes>
    </Router>
 
    </div>
  );
}
export default App;

We add some styling to highlight the component load on the page in app.css file

.main
{
  height: 300px;
  width: 600px;  
  margin-left: 30%;
  margin-top: 5%;
  background-color: bisque;
}

Now we have run the application and opened the browser. We can see below the output. Where we can easily navigate to other component and also pass a parameter through the URL and get it into the components.

Next article link =>  Forms and Basic Validations in React

Summary

In this article, we have implemented the routing in react application and passed parameters through the URL. I hope you understand the implementation of the routing, Thank you for reading this article.