How to Use useLocation in React: Simple Guide with Examples

In React, use the useLocation hook from react-router-dom to get the current URL location object inside your functional components. This object contains information like the current pathname, search query, and state, helping you react to URL changes easily.

Syntax

The useLocation hook is imported from react-router-dom and used inside functional components to access the current location object.

• const location = useLocation(); - gets the location object.
• The location object has properties like pathname (current URL path), search (query string), and state (optional state passed during navigation).

javascript

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

function MyComponent() {
  const location = useLocation();
  // location.pathname, location.search, location.state
  return null;
}

Example

This example shows a simple React component that uses useLocation to display the current URL path and query string. It updates automatically when the URL changes.

javascript

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

function ShowLocation() {
  const location = useLocation();
  return (
    <div>
      <h2>Current Path: {location.pathname}</h2>
      <p>Query String: {location.search || '(none)'}</p>
    </div>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

export default function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about?ref=nav">About</Link>
      </nav>
      <ShowLocation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

Output

When you visit '/' path, it shows:
Current Path: /
Query String: (none)

When you click About link, it shows:
Current Path: /about
Query String: ?ref=nav

Common Pitfalls

• Using useLocation outside of a Router component causes errors because the hook depends on router context.
• Expecting location.state to always exist; it can be undefined if no state was passed during navigation.
• Not re-rendering on location change if the component is not inside Routes or does not use the hook properly.

javascript

/* Wrong: useLocation outside Router causes error */
import { useLocation } from 'react-router-dom';

function BadComponent() {
  const location = useLocation(); // Error: no router context
  return <div>{location.pathname}</div>;
}

/* Right: Wrap in Router */
import { BrowserRouter as Router } from 'react-router-dom';
import { useLocation } from 'react-router-dom';

function GoodComponent() {
  const location = useLocation();
  return <div>{location.pathname}</div>;
}

export default function App() {
  return (
    <Router>
      <GoodComponent />
    </Router>
  );
}

Quick Reference

Property	Description
pathname	The current URL path (e.g., '/about')
search	The query string part of the URL (e.g., '?id=5')
hash	The URL hash fragment (e.g., '#section1')
state	Optional state object passed during navigation
key	Unique string to identify the location

Key Takeaways

Import and use useLocation inside components wrapped by a Router.

useLocation returns the current URL info like pathname and search query.

Check if location.state exists before using it to avoid errors.

The component re-renders automatically when the URL changes.

Never use useLocation outside router context to prevent runtime errors.