What does useLocation() do?

ReactJunior~2 min read

What `useLocation()` does

useLocation() returns a location object that contains information about the current route (URL): the path, query parameters, state, and so on.

It's an analog of the window.location object, but in the context of React Router, updating on every route change and working without reloading the page.

Example usage

javascript

import { useLocation } from "react-router-dom";

function CurrentPageInfo() {
  const location = useLocation();

  console.log(location);

  return (
    <div>
      <p>Current path: {location.pathname}</p>
      <p>Query string: {location.search}</p>
      <p>Hash: {location.hash}</p>
    </div>
  );
}

If the URL is:

javascript

https://example.com/products?id=42#details

Then useLocation() returns the object:

javascript

{
  pathname: "/products",
  search: "?id=42",
  hash: "#details",
  state: undefined,
  key: "a1b2c3" // unique route key
}

Structure of the `location` object

Property	Description	Example
`pathname`	The path without the domain	`"/profile/123"`
`search`	Query parameters (everything after `?`)	`"?sort=asc&page=2"`
`hash`	The anchor (everything after `#`)	`"#section-3"`
`state`	Arbitrary data passed through `navigate()`	`{ fromCart: true }`
`key`	A unique identifier for the history entry	`"xy12ab"`

Example with `state`

If you passed data during navigation:

javascript

navigate("/checkout", { state: { fromCart: true } });

Then in the target component you can get it through useLocation():

javascript

import { useLocation } from "react-router-dom";

function Checkout() {
  const location = useLocation();
  console.log(location.state); // { fromCart: true }
}

This is convenient for passing data between pages without query parameters.

Example of dynamic usage

You can, for example, highlight the active link:

javascript

import { Link, useLocation } from "react-router-dom";

function Nav() {
  const location = useLocation();

  return (
    <nav>
      <Link
        to="/home"
        className={location.pathname === "/home" ? "active" : ""}
      >
        Home
      </Link>
      <Link
        to="/about"
        className={location.pathname === "/about" ? "active" : ""}
      >
        About
      </Link>
    </nav>
  );
}

When the route changes, React Router automatically updates the location object, which triggers a re-render and changes the active link.

When `useLocation()` is especially useful

Scenario	Why it's needed
Tracking the current route	For highlighting active links, breadcrumbs
Getting data passed through `navigate(state)`	For navigation context (for example, where the user came from)
Parsing query parameters	For example, `?page=2&sort=asc`
Reacting to route changes	For analytics, animations, resetting state, etc.

Example with React.useEffect

javascript

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function ScrollToTopOnRouteChange() {
  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return null;
}

The component will automatically scroll the page to the top on every navigation to a new route.

Important to remember:

useLocation() only works inside a <Router> (BrowserRouter, HashRouter, MemoryRouter, etc.).
It re-renders the component on every path change.
It's for reading navigation state, not a tool for changing the route (that's what useNavigate() is for).

Summary:

useLocation() is a hook that lets you get the current route data: the path (pathname), parameters (search, hash), and state (state).

Used for:

getting information about the current URL;
working with query parameters;
reading data passed through navigate();
reacting to route changes.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.