usePathname

usePathname هو hook لمكون العميل (Client Component) يتيح لك قراءة مسار URL (pathname) الحالي.

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

يتطلب usePathname عمدًا استخدام مكون العميل (Client Component). من المهم ملاحظة أن مكونات العميل ليست تخفيضًا للأداء. بل هي جزء أساسي من بنية مكونات الخادم (Server Components).

على سبيل المثال، سيتم عرض مكون العميل الذي يحتوي على usePathname في HTML عند تحميل الصفحة الأولي. عند الانتقال إلى مسار جديد، لا يحتاج هذا المكون إلى إعادة جلب البيانات. بدلاً من ذلك، يتم تنزيل المكون مرة واحدة (في حزمة جافا سكريبت الخاصة بالعميل)، ويعاد عرضه بناءً على الحالة الحالية.

معلومة مفيدة:

• قراءة URL الحالي من مكون الخادم (Server Component) غير مدعومة. هذا التصميم مقصود لدعم الحفاظ على حالة التخطيط عبر تنقلات الصفحات.
• وضع التوافق:
  • يمكن أن يُرجع usePathname قيمة null عند عرض مسار احتياطي (fallback route) أو عند تحسين صفحة من دليل pages تلقائيًا بشكل ثابت (automatically statically optimized) بواسطة Next.js ولم يكن الموجه جاهزًا.
  • عند استخدام usePathname مع إعادة الكتابة في next.config أو الوسيط (Middleware)، يجب أيضًا استخدام useState و useEffect لتجنب أخطاء عدم تطابق الترطيب (hydration mismatch).
  • سيقوم Next.js بتحديث أنواعك تلقائيًا إذا اكتشف وجود كل من دليل app و pages في مشروعك.

المعاملات

const pathname = usePathname()

لا يأخذ usePathname أي معاملات.

القيم المُرجعة

يُرجع usePathname سلسلة تمثل مسار URL الحالي. على سبيل المثال:

أمثلة

تنفيذ إجراء استجابة لتغيير المسار

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // نفذ شيئًا هنا...
  }, [pathname, searchParams])
}

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // نفذ شيئًا هنا...
  }, [pathname, searchParams])
}