Preact एकीकरण: usePathname हुक दस्तावेज़ीकरण

usePathname हुक ब्राउज़र के वर्तमान पाथनेम (pathname) को locale सेगमेंट हटाकर लौटाता है। यह locale-aware नेविगेशन बनाने के लिए उपयोगी है (उदाहरण के लिए, यह निर्धारित करना कि कौन सा नेव आइटम सक्रिय (active) है) बिना locale उपसर्ग (prefix) को मैन्युअली हटाए।

Preact में usePathname आयात करना

import { usePathname } from "preact-intlayer";

अवलोकन (Overview)

usePathname window.location.pathname को पढ़ता है, getPathWithoutLocale के माध्यम से locale उपसर्ग (prefix) को हटाता है, और जब भी ब्राउज़र popstate घटना (बैक/फॉरवर्ड नेविगेशन) को ट्रिगर करता है, तो यह घटक (component) को फिर से रेंडर करता है। सर्वर-साइड रेंडरिंग (SSR) के दौरान यह एक खाली स्ट्रिंग लौटाता है।

उपयोग (Usage)

import type { FunctionComponent } from "preact";
import { usePathname } from "preact-intlayer";

type NavItemProps = {
  href: string;
  label: string;
};

const NavItem: FunctionComponent<NavItemProps> = ({ href, label }) => {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <a href={href} aria-current={isActive ? "page" : undefined}>
      {label}
    </a>
  );
};

export default NavItem;

रिटर्न वैल्यू (Return Value)

व्यवहार (Behavior)

• Locale को हटाना (Locale stripping): URL के शुरुआत में मौजूद locale सेगमेंट को हटाता है (उदा. /hi/dashboard → /dashboard)।
• रिएक्टिव (Reactive): popstate घटनाओं (ब्राउज़र बैक / फॉरवर्ड नेविगेशन) पर स्वचालित रूप से अपडेट होता है।
• SSR-सुरक्षित (SSR-safe): जब window उपलब्ध नहीं होता है तो "" लौटाता है।
• क्लीनअप (Cleanup): जब कंपोनेंट अनमाउंट होता है, तो popstate श्रोता (listener) स्वचालित रूप से हटा दिया जाता है।

उदाहरण (Example)

import type { FunctionComponent } from "preact";
import { usePathname } from "preact-intlayer";

const links = [
  { href: "/dashboard", label: "डैशबोर्ड" },
  { href: "/settings", label: "सेटिंग्स" },
];

const Sidebar: FunctionComponent = () => {
  const pathname = usePathname();

  return (
    <nav>
      {links.map(({ href, label }) => (
        <a
          key={href}
          href={href}
          style={{ fontWeight: pathname === href ? "bold" : "normal" }}
        >
          {label}
        </a>
      ))}
    </nav>
  );
};

export default Sidebar;

संबंधित (Related)