React JS Tutorial - Router

In this tutorial, we will learn about using Router in React. React enables navigation among views of various components in a React application, allowing the browser URL to change while keeping the UI in sync with the URL.

A React app is essentially a single-page application, comprising components that render like separate pages. This is achieved through the use of React Router, which conditionally renders certain components to display depending on the route being used in the URL.

Let's see how we can use Router in React. Switch to your project and install the React Router library by running the following command in the command prompt:

npm install react-router-dom

Once the installation is complete, switch to your project and create a new folder inside the `src` directory. Let's call it `components`.

Inside the `components` folder, create three new components: `Home.js`, `About.js`, and `Contact.js`. Open each component and add the following code:

Home.js:

import React, { Component } from 'react'

class Home extends Component {
    render() {
        return (
            <div>
                <h1>Home Page</h1>
            </div>
        )
    }
}

export default Home;

About.js:

import React, { Component } from 'react'

class About extends Component {
    render() {
        return (
            <div>
                <h1>About Us Page</h1>
            </div>
        )
    }
}

export default About;

Contact.js:

import React, { Component } from 'react'

class Contact extends Component {
    render() {
        return (
            <div>
                <h1>Contact Us Page</h1>
            </div>
        )
    }
}

export default Contact;

Next, go to the `App.js` file and import the `BrowserRouter`, `Route`, and `Switch` components from the React Router library. Also, import the `Home`, `About`, and `Contact` components.

import {BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home'; 
import About from './components/About'; 
import Contact from './components/Contact'; 

Inside the `App` component, return the following code:

<BrowserRouter>     
    <Switch> 
        <Route exact path='/' component={Home}/> 
        <Route path='/about' component={About}/> 
        <Route path='/contact' component={Contact}/> 
    </Switch>     
</BrowserRouter> 

To add a navigation bar, go to the Bootstrap website and copy the CSS CDN link. Paste it inside the `head` section of the `public/index.html` file.

Create a new component for the navigation bar by right-clicking on the `components` folder and creating a new file called `Navbar.js`. Open this file and add the following code:

import React, { Component } from 'react'

class Navbar extends Component {
    render() {
        return (
            <div>
                <nav className="navbar navbar-expand-lg navbar-light bg-light">
                    <a className="navbar-brand" href="#">Navbar</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon" />
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNav">
                        <ul className="navbar-nav">
                            <li className="nav-item active">
                                <a className="nav-link" href="/">Home </a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/about">About</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/contact">Contact</a>
                            </li>                       
                        </ul>
                    </div>
                </nav>
            </div>
        )
    }
}

export default Navbar;

Go back to the `App.js` file and import the `Navbar` component.

import Navbar from './components/Navbar'; 

Add the `Navbar` component before the `Switch` component.

<BrowserRouter>  
    <Navbar>         
    <Switch> 
        <Route exact path='/' component={Home}/> 
        <Route path='/about' component={About}/> 
        <Route path='/contact' component={Contact}/> 
    </Switch>     
</BrowserRouter> 

That's it! Let's check the result. Switch to your browser and you should see the navigation bar and the home page. Clicking on the about link should display the about page, and clicking on the contact link should display the contact page.

This demonstrates how to use Router in React. By following these steps, you can create a single-page application with navigation between different views.