usePathname
usePathname هو خطاف لمكون العميل (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تلقائيًا بشكل ثابت بواسطة Next.js ولم يكن الموجه جاهزًا.- سيقوم Next.js بتحديث أنواعك تلقائيًا إذا اكتشف وجود كل من دليل
appوpagesفي مشروعك.
المعاملات
const pathname = usePathname()لا يأخذ usePathname أي معاملات.
القيم المُرجعة
يُرجع usePathname سلسلة تمثل مسار URL الحالي. على سبيل المثال:
| URL | القيمة المُرجعة |
|---|---|
/ | '/' |
/dashboard | '/dashboard' |
/dashboard?v=2 | '/dashboard' |
/blog/hello-world | '/blog/hello-world' |
أمثلة
تنفيذ شيء استجابةً لتغيير المسار
'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])
}| الإصدار | التغييرات |
|---|---|
v13.0.0 | تم إدخال usePathname. |