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

Now open index.js file and add the following code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <BrowserRouter>
  <App />
</BrowserRouter>
, document.getElementById('root')
);
serviceWorker.unregister();

Open app.js file and add the following code

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Layout from './Layout/Layout'
function App() {
  return (
    <div className="App">
      <Layout></Layout>
    </div>
  );
}

export default App;

Now run the project by using 'Npm start'.

 

 

 Click on Employee

 

 

Click on Addemployee Button 

 

 

Click on Edit button 

 

To check if page is not found component, enter any invaild text in url 

 

 

Summary

In this article, we learned about routing in ReactJS applications.