What is React Router | How to use React Router Switch and React Router Link

What is ReactJS Router

Before actually start React Router, we should know abut routing in web app. There are two types of routing, client side routing and server side routing.

Server-side routing

It is the traditional version of routing. When user clicks a link, browser sends a request for a new page to server. Than server decides which html to return to browser based on requested page URL. When browser receives this page from server, browser entire page is refreshed. Then new page comes in place of old page. Obviously, loading of entire page degrades the performance. Mostly user need very small data in page to refresh, so why not to refresh only that part of page, instead of whole page.

Client-side routing

In client-side routing, the DOM elements need to refresh are requested from server. All other DOM elements are not refreshed. This technique make the communication very efficient. ReactJS use client-side routing.

React Router

In this lesson, we will learn about routing in react app. Below is react router example step by step:-

Step 1: Install react router

Install react router by using below npm command in VSCode terminal:-

npm install react-router-dom

Step 2: Create Components

Create three components, Home.jsx, About.jsx and Contact.jsx for react navigation:-

Home.jsx

import React from 'react';
const Home = () => {
    return(
        <h1>Home Page</h1>
    );
}
export default Home;

About.jsx

import React from 'react';
const About = () => {
    return(
        <h1>About Page</h1>
    );
}
export default About;

Contact.jsx

import React from 'react';
const Contact = () => {
    return(
        <h1>Contact Page</h1>
    );
}
export default Contact;

Step 3: Create react Navigation component and register the routes

In this step, we create a component Navbar.jsx containing links for above three components in it:-

import React from 'react';
import {NavLink} from 'react-router-dom';
const Navbar = () => {
  return(
     <Fragment>
        <NavLink to='/'>Home</NavLink>
        <NavLink to='/about'>About</NavLink>
        <NavLink to='/contact'>Contact</NavLink>
     </Fragment>
  );
}
export default Navbar;

Step 4: Create Main Component

Now create App.jsx component and add navigation and react router switch inside react Fragment node to register the routes:-

import React, { Fragment } from 'react';
import {Switch, Route} from 'react-router-dom';
import Home from './Home';
import ContactUs from './ContactUs';
import About from './About';
import Navbar from './NavBar';
const App = () => {
  return(
    <Fragment>
      <Navbar />
      <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/contact' component={ContactUs} />
            <Route path='/about' component={About} />
            <Route path='/contact' component={ContactUs} />
            <Route path='/about' component={About} />
      </Switch>
    </Fragment> 
  );
}
export default App;

Step 5: Render BrowserRouter object

Finally in index.jsx, render main component inside BrowserRouter:-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom';
var root = document.getElementById('root');
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
,root);

Step 6: Start development server to run app

npm start

After few seconds, app will be loaded in browser, Click on links to view react navigation as below:-