Solid Integration: usePathname हुक दस्तावेज़

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

Solid में usePathname को आयात करना

import { usePathname } from "solid-intlayer";

अवलोकन

usePathname window.location.pathname से प्रारंभ किया गया एक प्रतिक्रियाशील (reactive) सिग्नल बनाता है, getPathWithoutLocale के माध्यम से locale उपसर्ग को हटाता है, और जब भी ब्राउज़र popstate इवेंट (बैक/फॉरवर्ड नेविगेशन) फायर करता है तो सिग्नल को अपडेट करता है। onCleanup के माध्यम से इवेंट श्रोता (event listener) स्वचालित रूप से साफ हो जाता है।

उपयोग

import type { Component } from "solid-js";
import { usePathname } from "solid-intlayer";

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

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

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

export default NavItem;

रिटर्न वैल्यू

व्यवहार

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

उदाहरण

import type { Component } from "solid-js";
import { For } from "solid-js";
import { usePathname } from "solid-intlayer";

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

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

  return (
    <nav>
      <For each={links}>
        {({ href, label }) => (
          <a
            href={href}
            style={{ "font-weight": pathname() === href ? "bold" : "normal" }}
          >
            {label}
          </a>
        )}
      </For>
    </nav>
  );
};

export default Sidebar;

संबंधित