How to Get the Current Route in React

Use the current route when a component needs to react to the active URL, such as highlighting navigation, changing layouts, tracking analytics, or rendering route-specific UI.

What you’ll build or solve

You’ll learn how to get the current route in React with React Router’s useLocation() hook. You’ll also know when route matching helpers are cleaner.

When this approach works best

This approach is the right choice when the current URL should affect what the component shows or tracks.

Common real-world scenarios include:

• Active nav links
• Route-based page titles
• Analytics page tracking
• Conditional layouts
• Protected route logic

This is a bad idea when the component already receives the needed route state as props from a parent.

Prerequisites

You only need:

• A React app using react-router-dom
• Basic hook knowledge
• Router context already set up

Step-by-step instructions

Step 1: Use useLocation() to read the active path

Import the hook from React Router.

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

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

  return <p>Current route: {location.pathname}</p>;
}

export default Header;

This gives access to the current pathname, query string, and hash.

The most common property is pathname.

location.pathname

This is ideal for route-aware UI.

Step 2: Use it for active navigation states

A common use case is highlighting the current nav item.

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

function Nav() {
  const { pathname } = useLocation();

  return (
    <nav>
      <Link className={pathname === "/" ? "active" : ""} to="/">
        Home
      </Link>
      <Link className={pathname === "/profile" ? "active" : ""} to="/profile">
        Profile
      </Link>
    </nav>
  );
}

export default Nav;

This keeps navigation synced with the URL.

Step 3: Use route checks for layout changes

You can conditionally render UI by route.

function Layout() {
  const { pathname } = useLocation();

  return (
    <>
      {pathname !== "/login" && <Sidebar />}
      <main>Page content</main>
    </>
  );
}

What to look for:

• useLocation() gives the active URL info
• pathname is the most common property
• Great for active nav and layouts
• Updates automatically on route change
• Keep route conditions simple

Examples you can copy

Current path text

const { pathname } = useLocation();

Active profile nav

className={pathname === "/profile" ? "active" : ""}

Hide sidebar on login

pathname !== "/login"

Common mistakes and how to fix them

Mistake 1: Using the hook outside router context

What the reader might do:

Call useLocation() in a component rendered outside BrowserRouter.

Why it breaks: the hook needs router context.

Corrected approach:

Wrap the app with BrowserRouter.

Mistake 2: Comparing full URLs instead of pathnames

What the reader might do:

Compare against "https://app.com/profile".

Why it breaks: pathname only contains the path.

Corrected approach:

Compare with "/profile".

Mistake 3: Overusing manual route checks

What the reader might do:

Write many pathname === ... conditions.

Why it breaks: this becomes harder to scale.

Corrected approach:

Use route config or helpers like NavLink when possible.

Troubleshooting

If the hook throws an error, confirm the app is wrapped in BrowserRouter.

If active links fail, compare against the exact pathname.

If many route checks repeat, switch to NavLink or shared helpers.

If query params matter, also inspect location.search.

Quick recap

• Use useLocation() to get the current route
• Read pathname for the active path
• Great for active nav and layouts
• Requires router context
• Use NavLink for larger nav systems