Skip to main content

​
useLocation

Returns the current Location object, which represents the current URL. This can be useful if you’d like to perform some side effect whenever it changes.

​
Signature

function useLocation(): Location

interface Location {
  pathname: string;
  search: string;
  hash: string;
  state: unknown;
  key: string;
}

​
Parameters

None.

​
Returns

​
Location
object
The current location object with the following properties:

​
Usage

​
Track page views

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

function Analytics() {
  const location = useLocation();
  
  useEffect(() => {
    // Send page view to analytics
    ga("send", "pageview");
  }, [location]);
  
  return null;
}

​
Access pathname

function Navigation() {
  const location = useLocation();
  const isActive = location.pathname === "/dashboard";
  
  return (
    <nav>
      <a
        href="/dashboard"
        className={isActive ? "active" : ""}
      >
        Dashboard
      </a>
    </nav>
  );
}

​
Access search params

function SearchResults() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const query = searchParams.get("q");
  
  return <h1>Results for: {query}</h1>;
}
For working with search params, consider using useSearchParams instead.

​
Access hash

function ScrollToSection() {
  const location = useLocation();
  
  useEffect(() => {
    if (location.hash) {
      const element = document.getElementById(
        location.hash.slice(1)
      );
      element?.scrollIntoView();
    }
  }, [location.hash]);
  
  return <div>...</div>;
}

​
Access location state

Location state is useful for passing data between routes without including it in the URL. Sending state: 
function ProductList() {
  return (
    <Link
      to="/products/123"
      state={{ fromList: true }}
    >
      View Product
    </Link>
  );
}
Or with navigate: 
navigate("/products/123", {
  state: { fromList: true },
});
Receiving state: 
function ProductDetail() {
  const location = useLocation();
  const fromList = location.state?.fromList;
  
  return (
    <div>
      {fromList && (
        <Link to="/products">Back to List</Link>
      )}
      {/* Product details */}
    </div>
  );
}

​
Conditional rendering based on URL

function Breadcrumbs() {
  const location = useLocation();
  const paths = location.pathname.split("/").filter(Boolean);
  
  return (
    <nav>
      <Link to="/">Home</Link>
      {paths.map((path, index) => {
        const to = `/${paths.slice(0, index + 1).join("/")}`;
        return (
          <span key={to}>
            {" > "}
            <Link to={to}>{path}</Link>
          </span>
        );
      })}
    </nav>
  );
}

​
Show background location for modals

function App() {
  const location = useLocation();
  const background = location.state?.backgroundLocation;
  
  return (
    <>
      <Routes location={background || location}>
        <Route path="/gallery" element={<Gallery />} />
        <Route path="/img/:id" element={<ImageView />} />
      </Routes>
      
      {background && (
        <Routes>
          <Route path="/img/:id" element={<Modal />} />
        </Routes>
      )}
    </>
  );
}

​
Type Safety

You can type the location state for better type checking: 
interface LocationState {
  from?: string;
  message?: string;
}

function Component() {
  const location = useLocation();
  const state = location.state as LocationState;
  
  console.log(state?.from);
  console.log(state?.message);
}

Build docs developers (and LLMs) love

Get started for freeTalk to us