Creating A Route To Add Notes Cloudnotebook

Creating a Route to Add Notes in CloudNoteBook React JS App using React Router

Creating a Route to Add Notes in CloudNoteBook 🛣️📝 Every notes app needs a dedicated page where users can actually create a new note. Instead of cramming an "Add Note" form onto our Home page, we'll give it its own route — a clean, shareable URL like /addnote — using React Router. This is a core skill for any React JS beginner building real-world apps like CloudNoteBook.

In this React JS tutorial, we will learn:

What a "route" is and why CloudNoteBook needs one for adding notes

Installing and setting up react-router-dom

Creating a dedicated AddNote.js component

Registering the /addnote route inside App.js

Linking to the Add Note page from the Navbar using NavLink

Why routing improves both user experience and SEO-friendly URL structure

---

What Is a Route, and Why Does CloudNoteBook Need One?

In a React JS single-page application, a route maps a URL path (like /addnote) to a specific component that should render at that path. Without routing, our whole app would live on one single page, which quickly becomes messy and impossible to bookmark or share. By giving "Add Note" its own route, users can navigate directly to cloudnotebook.com/addnote, bookmark it, or go back to it using the browser's back button — all standard behavior that users (and search engines) expect from a real web app.

---

Step 1: Install React Router DOM

If you haven't already added React Router to your CloudNoteBook project, install it first.

npm install react-router-dom

---

Step 2: Create the AddNote Component

Let's create a new file AddNote.js inside your components folder. This will hold the form users fill out to add a new note — a title, a description, and a tag.

import React, { useState } from "react";
 
const AddNote = () => {
  const [note, setNote] = useState({
    title: "",
    description: "",
    tag: "General",
  });
 
  const handleChange = (e) => {
    setNote({ ...note, [e.target.name]: e.target.value });
  };
 
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("New Note Submitted:", note);
  };
 
  return (
    <div className="container my-4">
      <h2 className="mb-4">Add a New Note 🗒️</h2>
      <form onSubmit={handleSubmit}>
        <div className="mb-3">
          <label className="form-label">Title</label>
          <input
            type="text"
            className="form-control"
            name="title"
            value={note.title}
            onChange={handleChange}
          />
        </div>
 
        <div className="mb-3">
          <label className="form-label">Description</label>
          <textarea
            className="form-control"
            name="description"
            value={note.description}
            onChange={handleChange}
          />
        </div>
 
        <button type="submit" className="btn btn-warning">
          Add Note
        </button>
      </form>
    </div>
  );
};
 
export default AddNote;

---

Step 3: Register the /addnote Route in App.js

Open App.js and wrap your app in a <Router>, then register AddNote under the /addnote path using <Routes> and <Route> (React Router v6 syntax).

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import AddNote from "./components/AddNote";
 
function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/addnote" element={<AddNote />} />
      </Routes>
    </Router>
  );
}
 
export default App;

---

Step 4: Link to /addnote from the Navbar

A route is only useful if users can actually reach it. Let's add a NavLink inside Navbar.js so users can click their way to the Add Note page.

import React from "react";
import { NavLink } from "react-router-dom";
 
const Navbar = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-3">
      <span className="navbar-brand">CloudNoteBook ☁️📝</span>
      <div className="navbar-nav">
        <NavLink className="nav-link text-white" to="/">
          Home
        </NavLink>
        <NavLink className="nav-link text-white" to="/addnote">
          Add Note
        </NavLink>
      </div>
    </nav>
  );
};
 
export default Navbar;

---

How Routing Pieces Fit Together

Piece	Lives In	Purpose
`<Router>`	`App.js`	Enables URL-based navigation for the whole app
`<Route path="/addnote">`	`App.js`	Tells React Router which component to render at `/addnote`
`<NavLink to="/addnote">`	`Navbar.js`	Gives users a clickable link to navigate to the Add Note page
`AddNote.js`	`components/`	The actual form component rendered at the `/addnote` route

---

Features and Learnings:-

Understood what a route is and why CloudNoteBook needs a dedicated Add Note page.

Installed and configured react-router-dom for client-side routing.

Built a standalone AddNote.js component with a controlled form.

Registered the /addnote route using React Router v6's <Routes> and <Route>.

Added a NavLink in the Navbar so users can reach the Add Note page easily.

Learned why clean, dedicated routes matter for both usability and SEO-friendly URLs.

Prepared the app for the next step: saving the submitted note into state (or a database).