Learn Uselocation Hook In React Js Cloudnotebook App

Learn useLocation Hook in React JS | CloudNoteBook App | React JS Tutorial for Beginners📒 In this React JS tutorial for beginners, we will learn the useLocation hook from React Router by using it inside our CloudNoteBook App. The useLocation hook lets a functional component know which URL the user is currently on — its path, its query string, and any extra data passed along with navigation. This is extremely useful for things like highlighting the active menu item, filtering notes by category from the URL, or reading data passed from one page to another.

In this tutorial, we will learn:

What is the useLocation Hook?

useLocation is a hook provided by react-router-dom that returns an object representing the current URL location of your app. Every time the route changes — by clicking a link, pressing back/forward, or redirecting — useLocation gives your component fresh information about where the user is right now, without you having to read window.location manually.

Step 1: Import useLocation in CloudNoteBook

Open your Navbar.js functional component inside the CloudNoteBook App and import useLocation from react-router-dom.

import React from "react";
import { Link, useLocation } from "react-router-dom";
 
const Navbar = () => {
  const location = useLocation();
 
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">CloudNoteBook 📒</Link>
      </div>
    </nav>
  );
};
 
export default Navbar;

Step 2: Highlight the Active Link using location.pathname

The location.pathname property tells us the current path, like /, /notes, or /about. We can compare it to each link's path and add an active class when they match.

<li className="nav-item">
  <Link
    className={`nav-link ${location.pathname === "/notes" ? "active fw-bold" : ""}`}
    to="/notes"
  >
    My Notes
  </Link>
</li>

Step 3: Read Query Params using location.search

Suppose CloudNoteBook lets users filter notes by category through a URL like /notes?category=work. The location.search property gives us the raw query string (?category=work), which we can parse with URLSearchParams to get the actual value.

const Notes = () => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const category = queryParams.get("category") || "all";
 
  return (
    <div className="container my-4">
      <h2>Showing notes for: {category}</h2>
    </div>
  );
};

Step 4: Pass and Read Hidden Data using location.state

Sometimes we want to send extra information to the next page without putting it in the URL — for example, telling the Notes page which page the user came from. We pass this using the state prop on Link, and read it back with location.state.

// Linking from the Home page
<Link to="/notes" state={{ from: "home" }}>View My Notes</Link>
 
// Reading it on the Notes page
const location = useLocation();
console.log(location.state?.from); // "home"

Step 5: Full Updated Navbar.js for CloudNoteBook

Here is the complete Navbar.js file, using useLocation to highlight the active link across the CloudNoteBook App.

import React from "react";
import { Link, useLocation } from "react-router-dom";
 
const Navbar = () => {
  const location = useLocation();
 
  const isActive = (path) => location.pathname === path;
 
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">CloudNoteBook 📒</Link>
 
        <div className="navbar-nav">
          <Link
            className={`nav-link ${isActive("/") ? "active fw-bold" : ""}`}
            to="/"
          >
            Home
          </Link>
 
          <Link
            className={`nav-link ${isActive("/notes") ? "active fw-bold" : ""}`}
            to="/notes"
            state={{ from: "navbar" }}
          >
            My Notes
          </Link>
 
          <Link
            className={`nav-link ${isActive("/about") ? "active fw-bold" : ""}`}
            to="/about"
          >
            About
          </Link>
        </div>
      </div>
    </nav>
  );
};
 
export default Navbar;

Understanding the location Object

Features and Learnings:-