useLocation returns an object representing the current URL, including its pathname, search query string, and hash, letting a component read routing information without needing props passed down.

Syntax

const location = useLocation();

Deep Dive Course

useLocation() returns a location object with properties like pathname, the URL path, e.g. '/products/42', search, the raw query string, e.g. '?sort=price', and hash, the URL fragment after #, reflecting the current URL at any point in a component tree rendered within a Router. It's especially useful for logic that needs to react to the current route without necessarily being the specific component that matched that route via Route, such as tracking page views for analytics, conditionally highlighting the active navigation link, or reading query parameters that aren't part of a route's own path pattern.

1Understanding useLocation

💡

location.search gives you the raw query string, like '?sort=price&page=2' — pass it to the URLSearchParams constructor, new URLSearchParams(location.search), to conveniently parse individual query parameters rather than manually splitting the string yourself.

editor.html

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

function CurrentPath() {
  const location = useLocation();
  return <p>You are at: {location.pathname}</p>;
}

// Visiting /products/42 renders:

localhost:3000

2Practical Example

Here is a real-world application of useLocation showing how it is used in production React code.

editor.html

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

function SearchResults() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  return <p>Sorting by: {params.get('sort')}</p>;
}

// Visiting /search?sort=price renders:

localhost:3000

3Best Practices

Follow these guidelines when working with useLocation:

1. Use useLocation() to read the current pathname for logic like highlighting an active navigation link, comparing it against each link's own target path

2. Parse location.search with new URLSearchParams(location.search) to cleanly extract individual query parameters, rather than manually splitting the raw string

3. Include location.pathname, or the full location object, in a useEffect's dependency array when an effect, like an analytics page-view log, needs to re-run specifically when the route changes

⚠️

Tip: location.search gives you the raw query string, like '?sort=price&page=2' — pass it to the URLSearchParams constructor, new URLSearchParams(location.search), to conveniently parse individual query parameters rather than manually splitting the string yourself.

editor.html

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

function CurrentPath() {
  const location = useLocation();
  return <p>You are at: {location.pathname}</p>;
}

// Visiting /products/42 renders:

localhost:3000

Examples

Example 01Basic Usage

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

function CurrentPath() {
  const location = useLocation();
  return <p>You are at: {location.pathname}</p>;
}

// Visiting /products/42 renders:

Example 02Advanced Example

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

function SearchResults() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  return <p>Sorting by: {params.get('sort')}</p>;
}

// Visiting /search?sort=price renders:

Best Practices

Use useLocation() to read the current pathname for logic like highlighting an active navigation link, comparing it against each link's own target path
Parse location.search with new URLSearchParams(location.search) to cleanly extract individual query parameters, rather than manually splitting the raw string
Include location.pathname, or the full location object, in a useEffect's dependency array when an effect, like an analytics page-view log, needs to re-run specifically when the route changes

Interview Question

Why is useLocation useful even for components that aren't the specific component matched and rendered by a particular Route?▼

Hint: Think about logic like analytics tracking or highlighting an active nav link — does that logic need to BE the routed page component, or just need to know what the current URL is?

Plenty of routing-aware logic doesn't actually need to be the specific component a Route renders for a matched path, it just needs read access to what the current URL happens to be, regardless of which particular route matched it — a navigation bar highlighting the currently active link needs to compare the current path against each link's target path, and an analytics hook logging page views needs to know whenever the path changes, but neither of these is itself the page being routed to. Since useLocation() can be called from any component rendered anywhere within a Router, not just one directly rendered by a matching Route, it lets this kind of route-aware-but-not-route-specific logic access current URL information directly through a hook, without needing the current location awkwardly threaded down as a prop from whatever component did happen to match the route.

Exercises

MediumPractice using useLocation in a real scenario.

View Solution

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

function CurrentPath() {
  const location = useLocation();
  return <p>You are at: {location.pathname}</p>;
}

// Visiting /products/42 renders:

Frequently Asked Questions

Why is useLocation useful even for components that aren't the specific component matched and rendered by a particular Route?▼

Related Functions

usenavigateuseparamslink