useNavigate useNavigate للتنقّل

آخر تحديث: 2026-11-03

useNavigate useNavigate للتنقّل

يُعيد useNavigate دالة navigate: اذهب إلى الصفحة الرئيسية بعد تسجيل الدخول، عُد إلى القائمة بعد الإرسال، ارفض المستخدمين المجهولين — كل هذه القفزات التي يُحرّكها الكود تستخدمه. navigate(to) يدفع للأمام، وnavigate(-1) يرجع، ويمكن تمرير replace وstate. إنه النظير الأمرّي لـ Link والأداة المناسبة كلما كان الكود — لا المستخدم — هو من يقرر الوجهة التالية.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { useNavigate } from 'react-router-dom'

function LoginButton() {
  const navigate = useNavigate()
  return (
    <button onClick={() => {
      // Navigate after a successful login; replace leaves no history entry
      navigate('/dashboard', { replace: true })
    }}>Sign in</button>
  )
}
// navigate(-1) is the browser back button
// navigate('/detail', { state: { from: 'home' } }) carries hidden state

⚙️ المعاملات

القيمة المرجعة：يُعيد دالة navigate(to, options?)؛ استدعاؤها يُطلق القفزة؛ لا ترسم أي واجهة وتغيّر المسار فقط.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

النقر على «اذهب لتسجيل الدخول» يلحق login بمكدّس السجل؛ و«الرجوع للرئيسية بـ replace» يطمس القمة بلا أثر؛ و«رجوع» يبرز المكدّس ويعود للصفحة السابقة — سلوكيات push وreplace وback في navigate (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من التوجيه والحالة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن