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)