لسلام عليكم
الرجاء المساعدة في عدم فاعلية الكود التالي
App
function App() {
return (
<>
<Routes>
<Route
path="/"
element={
<AppRoute
redirect='/login'
user={Auth.auth}
>
<Chat/>
</AppRoute>
}
/>
<Route
path="/register"
element={
<AppRoute
redirect='/'
user={Auth.guest}
>
<Register/>
</AppRoute>
}
/>
<Route
path="/login"
element={
<AppRoute
redirect='/'
user={Auth.guest}
>
<Login/>
</AppRoute>
}
/>
<Route path= "*" element={ <NotFound/> }/>
</Routes>
</>
);
}
AppRoute
const AppRoute = ({ user, children, redirect }) => {
if (!user) {
return <Navigate to={redirect} />;
}
return children;
};
Auth
const Auth = {
auth: () => localStorage.getItem('user') !== null,
guest: () => localStorage.getItem('user') === null,
};
مثلما تلاحظون، في صورة عدم وجود مستخدم في ذاكرة المتصفح فإنه يتوجه مباشرة إلى صفحة تسجيل الدخول
إلا أن النتيجة التي تحصلت عليها عكس ذلك
ففي صورة كانت ذاكرة المتصفح فارغة فإنه يتوجه إلى الصفحة الرئيسية
شكرا على المساعدة