作者:
    Aymeric PINEAU
    Creation:2026-06-22Last update:2026-06-22

    Solid 集成: usePathname Hook 文档

    usePathname Hook 返回当前浏览器路径 (pathname)，并去除了语言区域 (locale) 片段，类型为 Solid 的 Accessor<string>。它在构建包含本地化的导航栏时非常有用（例如，确定哪个导航项处于活动状态），无需手动删除 locale 前缀。

    在 Solid 中导入 usePathname

    typescript
    import { usePathname } from "solid-intlayer";

    概览

    usePathname 创建一个从 window.location.pathname 初始化的响应式信号 (reactive signal)，通过 getPathWithoutLocale 剥离 locale 前缀，并在浏览器触发 popstate 事件（后退/前进导航）时更新信号。事件监听器通过 onCleanup 自动清理。

    用法

    src/components/NavItem.tsx
    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;

    返回值

    类型 描述
    Accessor<string> Solid Accessor（响应式 getter），返回不包含 locale 前缀的当前路径 (pathname)。

    行为

    • 剥离 Locale: 移除路径首部的 locale 片段（例如：/zh/dashboard → /dashboard）。
    • 响应式: 在触发 popstate 事件（浏览器后退 / 前进导航）时自动更新。
    • SSR 安全: 当 window 不可用时返回 ""。
    • 清理: popstate 监听器会通过 Solid 的 onCleanup 自动移除。

    示例

    src/components/Sidebar.tsx
    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;

    相关文档

    useLocaleuseRewriteURL