Navigating in Code useNavigateالتنقل البرمجي بخطاف useNavigate
وجّه المستخدم برمجياً بعد إرسال النماذج بخطاف useNavigate وخيار replace، وأنشئ صفحة 404 وحارس المسارات المحمية ProtectedRoute مع تطبيق التحقق الأمني الإلزامي بالخادم.
3 صفوف تعليمية
ReactJS
1 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
تُبنى الروابط القابلة للنقر المباشر بمكوني <Link> و<NavLink>، غير أن الانتقال قد ينشأ أحياناً نتيجة حدث برمجي؛ مثل إتمام إرسال نموذج تسجيل، أو نجاح طلب حفظ على الخادم، أو انتهاء مهلة الجلسة. عندئذ نستدعي خطاف const navigate = useNavigate() في أعلى المكون، ثم ننفذ navigate("/confirmation") داخل معالج الحدث.
الصف 2
كود برمجي
</>HTML
function EnrollForm() {
const navigate = useNavigate();
function handleSubmit(e) {
e.preventDefault();
navigate('/welcome');
}
return <form onSubmit={handleSubmit}>...</form>;
}
