شرح صفوف ومحتوى الفقرة
بدمج منفذ التخطيط <Outlet /> مع useLocation() و<Navigate replace /> نحصل على نمط حارس المسارات القياسي ProtectedRoute: نضع كافة صفحات الأعضاء داخل مسار أب واحد يتحقق من جلسة المستخدم؛ فإذا لم يكن مسجلاً يحوّله إلى /login مع حفظ وجهته الأصلية في state={{ from: location.pathname }} لإعادته إليها فور تسجيل الدخول!
HTML
function ProtectedRoute({ user }) {
const loc = useLocation();
if (!user) {
return (
<Navigate
to="/login" replace
state={{ from: loc.pathname }}
/>
);
}
return <Outlet />;
}