استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
تاريخ الإصدارات
- "إضافة أداة usePathname"v10.0.0٢٣/٦/٢٠٢٦
- "تهيئة السجل التاريخي"v8.2.0٢٢/٦/٢٠٢٦
تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية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
تكامل Preact: توثيق الهوك usePathname
يُرجع الهوك usePathname المسار الحالي للمتصفح (pathname) مع إزالة مقطع اللغة (locale). يعد هذا مفيدًا لبناء تنقل (navigation) متوافق مع اللغة — على سبيل المثال، تحديد أي عنصر تنقل هو النشط — دون الحاجة إلى إزالة بادئة اللغة يدويًا.
استيراد usePathname في Preact
نسخ الكود إلى الحافظة
import { usePathname } from "preact-intlayer";نظرة عامة
يقرأ usePathname القيمة window.location.pathname، ويزيل بادئة اللغة عبر الدالة getPathWithoutLocale، ويعيد تصيير المكون (re-renders) كلما أطلق المتصفح حدث popstate (التنقل للخلف / للأمام). يُرجع سلسلة نصية فارغة أثناء التصيير من جانب الخادم (SSR).
الاستخدام
نسخ الكود إلى الحافظة
import type { FunctionComponent } from "preact";import { usePathname } from "preact-intlayer";type NavItemProps = { href: string; label: string;};const NavItem: FunctionComponent<NavItemProps> = ({ href, label }) => { const pathname = usePathname(); const isActive = pathname === href; return ( <a href={href} aria-current={isActive ? "page" : undefined}> {label} </a> );};export default NavItem;القيمة المرجعة
افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح
| النوع | الوصف |
|---|---|
string | المسار الحالي بدون بادئة اللغة. سلسلة نصية فارغة أثناء التصيير من جانب الخادم (SSR). |
السلوك
- إزالة اللغة (Locale stripping): يزيل مقطع اللغة الرائد (مثل
/ar/dashboard←/dashboard). - تفاعلي (Reactive): يتحدث تلقائيًا عند أحداث
popstate(تنقل المتصفح للخلف / للأمام). - آمن لـ SSR: يعود بـ
""عندما لا يكونwindowمتاحًا. - التنظيف (Cleanup): يتم إزالة مستمع الـ
popstateتلقائيًا عند إلغاء تحميل المكون (unmount).
مثال
نسخ الكود إلى الحافظة
import type { FunctionComponent } from "preact";import { usePathname } from "preact-intlayer";const links = [ { href: "/dashboard", label: "لوحة التحكم" }, { href: "/settings", label: "الإعدادات" },];const Sidebar: FunctionComponent = () => { const pathname = usePathname(); return ( <nav> {links.map(({ href, label }) => ( <a key={href} href={href} style={{ fontWeight: pathname === href ? "bold" : "normal" }} > {label} </a> ))} </nav> );};export default Sidebar;مواضيع ذات صلة
useLocale— اللغة الحالية + مبدّل اللغةgetPathWithoutLocale— الأداة الأساسية التي يستخدمها هذا الهوك