Creating Navbar With Bootstrap And Routes Cloudnotebook App

Creating Navbar with Bootstrap and React Routes in CloudNoteBook App

Creating Navbar with Bootstrap and Routes | CloudNoteBook App 📒🧭 Every multi-page React app needs two things working together: a Navbar so users can move around, and Routes so the right page actually loads when they click. In this tutorial, we'll start building CloudNoteBook — a cloud-based note-taking app — by creating a clean, responsive Bootstrap Navbar and wiring it up to React Router so users can navigate between Home, About, and Login pages.

In this tutorial, we will learn:

Why every React app needs client-side routing

Installing and configuring react-router-dom

Wrapping the app in BrowserRouter

Building a responsive Navbar component with Bootstrap classes

Using NavLink to highlight the active page

Defining Routes and Route for Home, About & Login pages

---

Why Do We Need React Router for CloudNoteBook?

CloudNoteBook will eventually have several pages — a Home page to view notes, an About page explaining the app, and a Login page for users to sign in before saving notes to the cloud. Without routing, we'd have to cram everything onto one page. React Router lets us define separate components for each page and switch between them instantly, without a full page reload — giving CloudNoteBook the smooth, app-like feel users expect.

---

Step 1: Install react-router-dom

First, install the React Router package in your CloudNoteBook project.

npm install react-router-dom

---

Step 2: Wrap the App in BrowserRouter

Open index.js and wrap the <App /> component inside BrowserRouter. This gives every component inside our app access to routing features.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
 
const root = ReactDOM.createRoot(document.getElementById("root"));
 
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

---

Step 3: Create the Navbar Component

Now let's build Navbar.js using Bootstrap's navbar classes. We use NavLink instead of a plain <a> tag so React Router can handle navigation without refreshing the page, and so we can style the currently active link.

import React from "react";
import { NavLink } from "react-router-dom";
 
const Navbar = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container-fluid">
        <NavLink className="navbar-brand" to="/">
          CloudNoteBook 📒
        </NavLink>
 
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
 
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item">
              <NavLink
                className={({ isActive }) =>
                  "nav-link" + (isActive ? " active fw-bold" : "")
                }
                to="/"
              >
                Home
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className={({ isActive }) =>
                  "nav-link" + (isActive ? " active fw-bold" : "")
                }
                to="/about"
              >
                About
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                className={({ isActive }) =>
                  "nav-link" + (isActive ? " active fw-bold" : "")
                }
                to="/login"
              >
                Login
              </NavLink>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};
 
export default Navbar;

---

Step 4: Create Placeholder Pages

Let's create three simple page components: Home.js, About.js, and Login.js. We'll flesh these out with real notes and auth logic in later tutorials.

// Home.js
import React from "react";
 
const Home = () => {
  return (
    <div className="container my-4">
      <h2>Welcome to CloudNoteBook 📒</h2>
      <p>Your notes, safely stored in the cloud.</p>
    </div>
  );
};
 
export default Home;

// About.js
import React from "react";
 
const About = () => {
  return (
    <div className="container my-4">
      <h2>About CloudNoteBook</h2>
      <p>CloudNoteBook helps you create, edit, and sync notes across devices.</p>
    </div>
  );
};
 
export default About;

// Login.js
import React from "react";
 
const Login = () => {
  return (
    <div className="container my-4">
      <h2>Login to CloudNoteBook</h2>
      <p>Sign in to access and sync your saved notes.</p>
    </div>
  );
};
 
export default Login;

---

Step 5: Define Routes in App.js

Finally, let's bring it all together in App.js using <Routes> and <Route> from react-router-dom, so each path renders the correct page below our Navbar.

import React from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import Login from "./components/Login";
 
function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </>
  );
}
 
export default App;

---

Routes Overview

Path	Component	Purpose
`/`	`Home`	Landing page showing the user's notes
`/about`	`About`	Explains what CloudNoteBook does
`/login`	`Login`	Lets users sign in before saving notes to the cloud

---

Features and Learnings:-

Understood why client-side routing matters for a multi-page React app like CloudNoteBook.

Installed and configured react-router-dom.

Wrapped the app in BrowserRouter inside index.js.

Built a responsive Navbar component using Bootstrap classes.

Used NavLink to highlight the currently active page.

Created placeholder Home, About, and Login pages.

Defined Routes and Route in App.js to connect pages to paths.

Prepared CloudNoteBook for the next step: adding real note-taking functionality to the Home page.