Suggest an edit

Improve this article

Refine the answer for “What does useLocation() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts551 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.