usePathname

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

'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 تلقائيًا بشكل ثابت بواسطة Next.js ولم يكن الموجه جاهزًا.
  • سيقوم 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])
}