Routing In ReactJS

Introduction

In this article we will learn routing in Reactjs from the beginning. Routing is a mechanism to redirect the users from one page to another page, and provides the navigation from one page to another page.

Prerequisites

We should have a basic knowledge of ReactJS
Visual Studio Code should be installed
Node and NPM installed

React router

React router is a routing library built on top of the react which is used to create the routing in React apps.

Create React.js Project

npx create-react-app routingdemo

Install react router

Install React router by using the following command.

npm install react-router-dom --save

Install bootstrap in this project by using the following command.

npm install --save bootstrap

Now, open the index.js file and add Bootstrap reference.

import 'bootstrap/dist/css/bootstrap.min.css';

Project structure

I have created two folders, layout and Views. Inside these folders I have created the following components.

Layout Folder components

Footer.js
Header.js
Leftside.js
Layout.js

Views folder conponents

Addemployee.js
Dashboard.js
Editemployee.js
Employee.js
Profile.js
Setting.js

Now let's create one more file named 'route.js', in this file we defined routing. Open route.js file and add the following code

import React from 'react';
const Dashboard=React.lazy(()=>import('./Views/Dashboard'));
const setting=React.lazy(()=>import('./Views/Setting'))
const employee=React.lazy(()=>import('./Views/Employee'))
const addemployee=React.lazy(()=>import('./Views/Addemployee'))
const editemployee=React.lazy(()=>import('./Views/Editemployee'))
const profile=React.lazy(()=>import('./Views/Profile'))
const notfound=React.lazy(()=>import('./PageNotFound'))
const routes = [
{ path: '/Dashboard', component: Dashboard },
{ path: '/setting', component: setting },
{ path: '/employee', component: employee },
{ path: '/addemployee', component: addemployee },
{ path: '/profile', component: profile },
{ path: '/editemployee/:id', exact: true, component: editemployee },
{ component:notfound }
];
export default routes;

Now go to Layout folder and open header.js file and add the following code.

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export class Header extends Component {
render() {
return (
<div>
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown no-arrow d-sm-none">
</li>
<li class="nav-item dropdown no-arrow mx-1">
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Sanwar</span>
<img src="https://img.icons8.com/officel/16/000000/user.png" />
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<Link class="dropdown-item" to="/profile">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</Link>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
</div>
)
}
}
export default Header

Now open Footer.js component and add the following code.

import React, { Component } from 'react'
export class Footer extends Component {
render() {
return (
<div>
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Rotuing in ReactJS</span>
</div>
</div>
</footer>
</div>
)
}
}
export default Footer

Now open Leftside.js component and add the following code.

import React, { Component } from 'react'
import { Link } from 'react-router-dom';
export class Leftside extends Component {
render() {
return (
<div>
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-text mx-3">React Routing </div>
</a>
<hr class="sidebar-divider my-0" />
<hr class="sidebar-divider" />
<li class="nav-item">
<Link class="nav-link" to="/Dashboard"> <i class="fas fa-fw fa-home"></i>Home</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/employee"> <i class="fas fa-fw fa-user"></i>Employee</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/setting"> <i class="fas fa-fw fa-cog"></i>Setting</Link>
</li>
</ul>
</div>
)
}
}
export default Leftside

Now open Layout.js component and import header, footer and leftside components reference. In this component, add the following code.

import React, { Component, Suspense } from 'react';
import Leftside from './Leftside';
import Header from './Header'
import Footer from './Footer'
import routes from '../routes';
import * as router from 'react-router-dom';
import {
Route, Switch, Redirect
} from 'react-router-dom';
export class Layout extends Component {
loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
render() {
return (
<div>
<div id="wrapper">
<Leftside></Leftside>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<Header />
<Suspense fallback={this.loading()}>
<Switch>
{routes.map((route, idx) => {
return route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<route.component {...props} />
)} />
) : (null);
})}
<Redirect from="/" to="/dashboard" />
</Switch>
</Suspense>
</div>
<Footer />
</div>
</div>
</div>
)
}
}
export default Layout

Layout structure

Now go to Views folder and open Dashboard.js component and add the following code.

import React, { Component } from 'react'
export class Dashboard extends Component {
render() {
return (
<div>
<h1>Welcome to React Routing Dashboard</h1>
</div>
)
}
}
export default Dashboard

Now open Addemployee.js component and following code.

import React, { Component } from 'react'
export class Addemployee extends Component {
render() {
return (
<div>
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<div style={{"padding":"0rem!important"}}>
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Create new Employee!</h1>
</div>
<form >
<div class="form-group row">
<div class="col-sm-12 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="eEmployeetName" placeholder="Employee Name" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="text" class="form-control form-control-user" id="City" placeholder="City" />
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="Email" placeholder="Email Address" />
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="Department" placeholder="Department" />
</div>
<a href="login.html" class="btn btn-primary btn-user btn-block">
Add Employee
</a>
</form>
</div>
</div>
</div>
</div>
)
}
}
export default Addemployee

Now open Setting.js component and add the following code.

import React, { Component } from 'react'
export class Setting extends Component {
render() {
return (
<div>
<h1>Welcome to React Routing Setting Dashboard</h1>
</div>
)
}
}
export default Setting

Now open Profile.js component and add the following code.

import React, { Component } from 'react'
export class Profile extends Component {
render() {
return (
<div>
<h3>Profile</h3>
</div>
)
}
}
export default Profile

Now open Employee.js component and add the following code.

import React, { Component } from 'react'
import { Link } from 'react-router-dom';
export class Color extends Component {
render() {
const employee = `/editemployee/${1}`
return (
<div>
<div class='container-fluid' >
<div className="row title" style={{marginBottom: "20px"}} >
<div class="col-sm-12 ">
<div class="col-sm-9 btn">
</div>
<div class="col-sm-3 btn btn-info nav-item">
<Link style={{"color":"white"}} class="nav-link" to="/addemployee"> <i style={{"color":"white"}} class="fas fa-fw fa-user"></i>Add Employee</Link>
</div>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Employee name</th>
<th>City</th>
<th>Email</th>
<th>Department</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>IT</td>
<td>
<Link class="btn btn-info" to={employee}>Edit</Link>
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
<td>HR</td>
<td>
<button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
<td>IT</td>
<td>
<button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
)
}
}
export default Color

Now open Editemployee.js component and add the following code.

import React, { Component } from 'react'
export class Editemployee extends Component {
render() {
return (
<div>
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<div style={{"padding":"0rem!important"}}>
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Update Employee</h1>
</div>
<form >
<div class="form-group row">
<div class="col-sm-12 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="eEmployeetName" placeholder="Employee Name" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="text" class="form-control form-control-user" id="City" placeholder="City" />
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="Email" placeholder="Email Address" />
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="Department" placeholder="Department" />
</div>
<a href="login.html" class="btn btn-primary btn-user btn-block">
Update Employee
</a>
</form>
</div>
</div>
</div>
</div>
)
}
}
export default Editemployee