Creating And Testing Routes For Cloudnotebook App

Creating and Testing Routes for CloudNoteBook App | React JS Tutorial for Beginners 🗂️🔗 Every real-world app has more than one screen — a Home page, a Login page, a page to view your notes, and so on. In our CloudNoteBook app, we need a way to move between these screens without reloading the whole page. That's exactly what React Router gives us: client-side routing that keeps our app fast and feels like a native application.

In this tutorial, we will learn:

What client-side routing is and why React Router is used for it

Installing react-router-dom in the CloudNoteBook project

Wrapping the app with BrowserRouter

Defining routes with Routes and Route

Navigating between pages using the Link component

Testing every route to confirm it renders the correct page

---

What is Routing in a React App?

Routing means showing different components based on the URL path, without the browser making a fresh request to the server every time. For example, visiting /login should show the Login page, while /notes should show the Notes page — all inside the same single-page React app. We achieve this using the react-router-dom library.

---

Step 1: Install react-router-dom

Open your terminal in the CloudNoteBook project folder and install the routing package.

npm install react-router-dom

---

Step 2: Wrap the App with BrowserRouter

Open index.js and wrap the <App /> component with BrowserRouter so routing works throughout the entire application.

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 Page Components

For CloudNoteBook, we'll create three simple page components: Home.js, Login.js, and Notes.js. Each lives in its own folder inside src/components.

// Home.js
import React from "react";
 
const Home = () => {
  return <h2 className="text-center my-4">Welcome to CloudNoteBook 📒</h2>;
};
 
export default Home;

// Login.js
import React from "react";
 
const Login = () => {
  return <h2 className="text-center my-4">Login to CloudNoteBook 🔐</h2>;
};
 
export default Login;

// Notes.js
import React from "react";
 
const Notes = () => {
  return <h2 className="text-center my-4">Your Saved Notes 🗒️</h2>;
};
 
export default Notes;

---

Step 4: Define Routes in App.js

Now let's use Routes and Route to map each URL path to its matching component.

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

---

Step 5: Add Navigation Links with Link

Instead of regular <a> tags (which reload the page), we use the Link component from react-router-dom so navigation stays smooth and instant.

// Navbar.js
import React from "react";
import { Link } from "react-router-dom";
 
const Navbar = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-3">
      <Link className="navbar-brand" to="/">CloudNoteBook</Link>
      <div className="d-flex gap-3">
        <Link className="nav-link text-white" to="/">Home</Link>
        <Link className="nav-link text-white" to="/login">Login</Link>
        <Link className="nav-link text-white" to="/notes">Notes</Link>
      </div>
    </nav>
  );
};
 
export default Navbar;

---

Step 6: Test Every Route

Run the app locally and manually verify each route renders the right page.

npm start

With the dev server running, test the following in your browser:

Visit http://localhost:3000/ → should show the Home page

Click Login in the navbar → URL becomes /login, Login page appears

Click Notes in the navbar → URL becomes /notes, Notes page appears

Use the browser's Back/Forward buttons → the correct page should load each time

Manually type /notes in the address bar and press Enter → the Notes page should still load correctly

---

Step 7: Full Updated App.js

Here is the complete App.js with routing wired up end-to-end.

import React from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Login from "./components/Login";
import Notes from "./components/Notes";
 
function App() {
  return (
    <>
      <Navbar />
      <div className="container my-4">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/notes" element={<Notes />} />
        </Routes>
      </div>
    </>
  );
}
 
export default App;

---

Route Setup at a Glance

Path	Component	What It Shows
`/`	`Home.js`	The CloudNoteBook welcome/landing page
`/login`	`Login.js`	The login form for existing users
`/notes`	`Notes.js`	The list of the user's saved notes

---

Features and Learnings:-

Understood what client-side routing is and why it's needed in React apps.

Installed and configured react-router-dom in the CloudNoteBook project.

Wrapped the app with BrowserRouter to enable routing globally.

Created separate page components: Home, Login, and Notes.

Defined routes using Routes and Route with the element prop.

Used the Link component for reload-free navigation in the navbar.

Manually tested every route, including direct URL access and browser Back/Forward behavior.

Prepared the app for the next step: adding protected/private routes for logged-in users.