React Integration: usePathname Hook Documentation

The usePathname hook from react-intlayer returns the current browser pathname with the locale segment removed. It relies on the native window.location.pathname and reacts to browser navigation events via popstate.

Importing usePathname

import { usePathname } from "react-intlayer";

Overview

Unlike framework-specific routing hooks (such as those in next-intlayer or react-router), this hook is a lightweight, framework-agnostic solution for plain React applications. It extracts the current URL and strips any matching locale prefix (e.g., /en/about becomes /about).

Usage

import type { FC } from "react";
import { usePathname } from "react-intlayer";

const Navigation: FC = () => {
  const pathname = usePathname();

  return (
    <nav>
      <a
        href="/home"
        style={{ fontWeight: pathname === "/home" ? "bold" : "normal" }}
      >
        Home
      </a>
      <a
        href="/about"
        style={{ fontWeight: pathname === "/about" ? "bold" : "normal" }}
      >
        About
      </a>
    </nav>
  );
};

export default Navigation;

Return Value

Behavior

• Locale Stripping: Uses the getPathWithoutLocale utility under the hood to automatically detect and remove the locale from the pathname based on the application's Intlayer configuration.
• Reactivity: Listens to the popstate event. When the user navigates using browser back/forward buttons or when pushState/replaceState is called, the hook updates the returned pathname.
• SSR Fallback: On the server (where window is undefined), it defaults to returning / since it has no access to the request URL by default in a pure React context.

Related Documentation

• useLocale
• getPathWithoutLocale