route.jsx ====================================================== import React from "react"; import { useSelector } from "react-redux"; import { Outlet, Route, Routes, useNavigate } from "react-router-dom"; import Loading from "@components/customers/shared/Loading"; import Error from "@pages/customer/error/Error"; import Home from "@pages/customer/home" import Home from "@pages/customer/profile" import UnauthorizedError from "@pages/customer/UnauthorizedError" const CustomerRoute = () => { const isAuthenticated = useSelector((state) => state.auth.isAuthenticated); const PrivateRoute = ({ children }) => { return isAuthenticated ? children : <UnauthorizedError />; }; return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/profile" element={ <PrivateRoute> <Profile /> </PrivateRoute> } /> <Route path="*" element={ <Error statusCode={404} title={"Page Not Found"} message="Sorry, the page you are looking for could not be found. Please check the URL or go back to the previous page." />} /> </Routes> ); }; export default CustomerRoute; ======================================================================================== authSlice.jsx // authSlice.js import { createSlice } from "@reduxjs/toolkit"; const authSlice = createSlice({ name: "auth", initialState: { isAuthenticated: false, user: null, }, reducers: { login: (state, action) => { state.isAuthenticated = true; state.user = action.payload; }, logout: (state) => { state.isAuthenticated = false; state.user = null; }, }, }); export const { login, logout } = authSlice.actions; export default authSlice.reducer;