ReactJS Routing

Introduction

In this article, I will explain routing in Reactjs from scratch. And also, I will discuss some fundamentals of routing. Routing is a technique to redirect from one page to another page without reloading the browser.

Prerequisites

React JS
HTML/Bootstrap
VS Code, Node, and NPM Installed

For this article, I have created a ReactJS project. For creating a ReactJS project, we need to follow the following steps,

Step 1. Create Project

I have created a project using the following command in the Command Prompt.

npx create-react-app ROUTINGWITHREACT

Step 2. Install react-router

Install React router by using the following command.

npm install react-router-dom --save

Step 3. Install react-bootstrap

Install React Bootstrap by using the following command.

npm install react-bootstrap [email protected]

Step 4. Add Bootstrap Reference

Add a Bootstrap reference in App.JS

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

Project Structure

I have created header and footer js files and import both files in app.js.

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './Layout/Header'
import {Footer} from './Layout/Footer'
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <>
    <Header/>
    <Footer/>
    </>
  );
}

export default App;

Footer.js

import React from 'react'

export const Footer = () => {
    return (
        <div className="p-3 mb-2 bg-dark text-white text-right"> Copyright ©  </div>
    )
}

I have to write code for the routing I header.js file. So import the following classes in the header.js file.

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

Add the following code for routing.

<Router>
  <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">
          <img src={logo} width="42px" />
          </Link>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link className="nav-link active" aria-current="page" to="/home">Home</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/student">Student</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <hr />
      <div className="container">
        <Switch>
          <Route path="/home">
            <Home />
          </Route>
          <Route path="/student">
            <AddStudent />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
   </div>
</Router>

Header.js

import React from "react";
import logo from '../logo.svg';
import Home from '../Home';
import AddStudent from '../Student/AddStudent';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

export default function Header() {
    return (
        <Router>
            <div >
                <nav className="navbar navbar-expand-lg navbar-light bg-light">
                    <div className="container-fluid">
                        <Link className="navbar-brand" to="/"><img src={logo} width="42px" /></Link>
                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                                <li className="nav-item">
                                    <Link className="nav-link active" aria-current="page" to="/home">Home</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" to="/student">Student</Link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <hr/>
                <div className="container">
                <Switch>
                    <Route path="/home">
                        <Home />
                    </Route>
                    <Route path="/student">
                        <AddStudent />
                    </Route>
                    <Route path="/">
                        <Home />
                    </Route>
                </Switch>
            </div>
            </div>
        </Router>
    )
}

Home.js

import React from 'react'

export default function Home() {
    return (
        <div>
              <h1>Hi Home</h1>
        </div>
    )
}

AddStudent.js

import React from 'react'

export default function AddStudent () {
    return (
        <div>
            <h1>Hi Student</h1>
        </div>
    )
}

Now, run the project using the following command,

npm start

ReactJS Rounting

Summary

In this article, I have discussed ReactJS Routing.