React30-Project 8: Building a Navbar using React Router

Saurabh Mhatre

5 min readNov 7, 2023

Introduction

In this tutorial, we’ll create a navbar using React.js and React Router to navigate between different pages.

Goal:

Make a navbar with which user can navigate between different pages as shown below:

Try building navbar once before proceeding with solution below.

React Router: Explained Simply

Imagine Your Website is a Big Playground:
Basic Idea:
Imagine your website is a big playground with different areas to play in. React Router helps you create paths or roads to these areas, making it easy for everyone to find and enjoy different parts of the playground.
React Router (Creating Paths):
React Router is like drawing colorful lines on the ground to create different paths. Each path leads to a specific area of the playground (a page or component)

Prerequisites

Node.js and npm installed on your system.
Basic understanding of JavaScript and React.

Step 1: Set Up a New React App

Open your terminal and run the following command to create a new React app:

npx create-react-app navbar-example

Step 2: Install React Router

In your terminal, navigate to the project directory and run the following command to install React Router:

npm install react-router-dom

Step 3: Create Components for Pages

Inside the src folder, create components folder with three components named Home.js, Features.js, and Pricing.js with the following content:

Home.js:

import React from "react";
import phoneImage from "../images/phone.png";
function Home() {
  return (
    <div className="container mt-5">
      <div className="row">
        <div className="col-md-6">
          <h6 className="text-secondary">New Launch</h6>
          <h2>Latest Phone</h2>
          <p className="text-secondary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
          <button className="btn btn-primary mt-5">Buy Now</button>
        </div>
        <div className="col-md-6">
          <img
            src={phoneImage}
            alt="Product"
            className="img-fluid product-image"
          />
          <div className="image-credits">
            Image by{" "}
            <a href="https://pixabay.com/users/openclipart-vectors-30363/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=153650">
              OpenClipart-Vectors
            </a>{" "}
            from{" "}
            <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=153650">
              Pixabay
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;

You can download product image from pixabay here and add to `images` folder with `src` folder:
Pixabay-Phone Image

Features.js

import React from "react";

const Features = () => {
  return (
    <section className="py-5">
      <div className="container">
        <div className="row">
          <div className="col-lg-4 mb-4">
            <div className="card h-100">
              <div className="card-body">
                <h4 className="card-title">Latest Camera</h4>
                <p className="card-text">Description of camera</p>
              </div>
            </div>
          </div>
          <div className="col-lg-4 mb-4">
            <div className="card h-100">
              <div className="card-body">
                <h4 className="card-title">Processor</h4>
                <p className="card-text">Description of processor</p>
              </div>
            </div>
          </div>
          <div className="col-lg-4 mb-4">
            <div className="card h-100">
              <div className="card-body">
                <h4 className="card-title">RAM</h4>
                <p className="card-text">Description of RAM</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Features;

Pricing.js

import React from "react";

const Pricing = () => {
  return (
    <section className="bg-light py-5">
      <div className="container">
        <div className="row">
          <div className="col-lg-4 mb-4">
            <div className="card h-100">
              <div className="card-body">
                <h4 className="card-title">Basic Version</h4>
                <h1 className="card-text">$200.00</h1>
                <p>Feature 1</p>
                <p>Feature 2</p>
                <p>Feature 3</p>
                <button className="btn btn-primary">Get Started</button>
              </div>
            </div>
          </div>
          <div className="col-lg-4 mb-4">
            <div className="card h-100">
              <div className="card-body">
                <h4 className="card-title">Pro Version</h4>
                <h1 className="card-text">$400.00</h1>
                <p>Feature 1</p>
                <p>Feature 2</p>
                <p>Feature 3</p>
                <button className="btn btn-primary">Get Started</button>
              </div>
            </div>
          </div>
          <div className="col-lg-4 mb-4">
            <div className="card h-100">
              <div className="card-body">
                <h4 className="card-title">Plus Version</h4>
                <h1 className="card-text">$300.00</h1>
                <p>Feature 1</p>
                <p>Feature 2</p>
                <p>Feature 3</p>
                <button className="btn btn-primary">Get Started</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Pricing;

Step 4: Create Navbar Component

Inside the src/components folder, create a new component named Navbar.js with the following content:

import React from "react";
import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-expand-md navbar-dark bg-primary">
      <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"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarNav">
        <ul className="navbar-nav">
          <li className="nav-item active">
            <Link to="/">
              <div className={"nav-link"} href="#">
                Home
              </div>
            </Link>
          </li>
          <li className="nav-item">
            <Link to="/features">
              <div className={"nav-link"} href="#">
                Features
              </div>
            </Link>
          </li>
          <li className="nav-item">
            <Link to="/pricing">
              <div className={"nav-link"} href="#">
                Pricing
              </div>
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

Here we use Link from react-router-dom to create links to different components of our app.

Step 5: Set Up Routes

Open the src folder and update the App.js file with the following content:

import React from "react";
import Features from "./components/Features";
import Pricing from "./components/Pricing";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./App.css";
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/features" element={<Features />} />
          <Route path="/pricing" element={<Pricing />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Here we are setting up routes to different components in our app using react-router-dom library.

Step 6: Add Basic Styling

Inside the src folder, create a file named App.css with the following content:

.product-image {
  height: 300px;
}
.image-credits {
  font-size: 12px;
}

Update the index.html file in public folder with below content to integrate bootstrap in our project:

<!DOCTYPE html>
<html lang="en">
  <head>
     ...
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    ...
  </head>

  <body>
    ...
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Step 7: Start the App

In your terminal, make sure you’re in the project directory and run:

npm start

This will start the development server and open the app in your default web browser.

You should now have a product landing page with the product image on the right side and product details on the left side. When you click on navbar links the pages should change to features and pricing respectively. Customize the content and styles further to suit your specific product details.

Source code links:
Codesandbox | Github

Conclusion

Congratulations! You’ve successfully built a Navbar using React.js and React Router. Feel free to explore and customize the app further to enhance your understanding of React. Have a nice day ahead!

Check out my Youtube channel for more content:
SaurabhNative-Youtube

Check out part 9 in the series for learning implementation of user authentication below:-

React30-Part 9