Svelte Integration: usePathname Documentation

usePathname फ़ंक्शन वर्तमान ब्राउज़र पथनाम (pathname) को locale खंड हटाकर Svelte Readable<string> स्टोर के रूप में लौटाता है। यह locale-जागरूक नेविगेशन बनाने के लिए उपयोगी है — उदाहरण के लिए, यह निर्धारित करना कि कौन सा नेव आइटम सक्रिय है — बिना locale उपसर्ग को मैन्युअल रूप से हटाए।

Svelte में usePathname आयात (Import) करना

import { usePathname } from "svelte-intlayer";

अवलोकन (Overview)

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

उपयोग (Usage)

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

  export let href: string;
  export let label: string;

  const pathname = usePathname();
</script>

<a {href} aria-current={$pathname === href ? "page" : undefined}>
  {label}
</a>

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

व्यवहार (Behavior)

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

उदाहरण (Example)

<script lang="ts">
  import { usePathname } from "svelte-intlayer";

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

  const pathname = usePathname();
</script>

<nav>
  {#each links as link}
    <a
      href={link.href}
      style:font-weight={$pathname === link.href ? "bold" : "normal"}
    >
      {link.label}
    </a>
  {/each}
</nav>

संबंधित (Related)

• useLocale — वर्तमान locale + locale स्विचर
• getPathWithoutLocale — इस हुक द्वारा उपयोग की जाने वाली अंतर्निहित उपयोगिता