Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту
Історія версій
- "Додано утиліту usePathname"v10.0.023.06.2026
- "Ініціалізація історії"v8.2.022.06.2026
Вміст цієї сторінки перекладено за допомогою штучного інтелекту.
Переглянути останню версію оригінального вмісту англійськоюIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
Інтеграція з Solid: Документація хука usePathname
Хук usePathname повертає поточний шлях (pathname) браузера із видаленим сегментом локалі, у вигляді Accessor<string> для Solid. Це корисно для навігації з урахуванням локалі — наприклад, для визначення активного пункту меню — без необхідності вручну видаляти префікс локалі.
Імпорт usePathname в Solid
Скопіюйте код у буфер обміну
import { usePathname } from "solid-intlayer";Огляд
usePathname створює реактивний сигнал, що ініціалізується з window.location.pathname, видаляє префікс локалі через getPathWithoutLocale і оновлює сигнал кожного разу, коли браузер викликає подію popstate (навігація назад/вперед). Слухач подій автоматично очищається за допомогою onCleanup.
Використання
Скопіюйте код у буфер обміну
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> | Accessor для Solid (реактивний геттер), що повертає поточний шлях (pathname) без префікса локалі. |
Поведінка
- Видалення локалі: Видаляє початковий сегмент локалі (наприклад,
/uk/dashboard→/dashboard). - Реактивність: Автоматично оновлюється під час подій
popstate(навігація назад/вперед у браузері). - Безпека для SSR: Повертає
"", якщо об'єктwindowнедоступний. - Очищення: Слухач
popstateавтоматично видаляється черезonCleanupу Solid.
Приклад
Скопіюйте код у буфер обміну
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;Пов'язані хуки
useLocale— поточна локаль + перемикач локалейgetPathWithoutLocale— базова утиліта, яку використовує цей хук