I am currently implementing protected routes in my Redux and Pure React app using React Router Dom. The issue I am facing is that when I navigate to /profile/edit and then refresh the page, it automatically redirects me to /login and then to /profile. I have set up a protected route but I want to ensure that when I am on an isAuthenticated page, I stay on that page without being redirected to /profile. Initially, I placed my protectedRoute component inside the element prop which caused some problems. I then tried placing it within a loader component, but now the protected route does not seem to work properly. Can anyone provide some guidance on how to achieve this or offer any suggestions? Thank you.
// App.js
<Routes>
<Route
element={
<ProtectedRoute
isAuthenticatedRoute={false}
sendTo={"/profile"}
/>
}
>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Route>
{/* Profile Pages */}
<Route
element={
<ProtectedRoute
isAuthenticatedRoute={true}
sendTo={"/login"}
/>
}
>
<Route path="/profile" element={<Profile />} />
<Route path="/profile/category" element={<EditCategory />} />
<Route path="/profile/edit" element={<EditProfile />} />
</Route>
{/* Page Not Found */}
<Route path="/*" element={<PageNotFound />} />
</Routes>
// App.js with loader
<Routes>
<Route
loader={
<ProtectedRoute
isAuthenticatedRoute={false}
sendTo={"/profile"}
/>
}
>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Route>
</Routes>
// ProtectedRoutes.js
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { Navigate, Outlet, useNavigate } from "react-router-dom";
import AppLoader from "../AllLoader/AppLoader/AppLoader";
import { useLoadUserQuery } from "../../redux/feature/apiSlice/apiSlice";
const ProtectedRoute = ({
isAuthenticatedRoute,
children,
adminRoute,
isAdmin,
sendTo,
}) => {
const navigate = useNavigate();
const { isLoading } = useLoadUserQuery(undefined, undefined);
const { user } = useSelector((state) => state.auth);
if (isLoading) {
return <AppLoader />;
}
const isAuthenticated = user;
if (isAuthenticatedRoute && !isAuthenticated) {
return <Navigate to="/login" replace={true} />;
}
if (!isAuthenticatedRoute && isAuthenticated) {
return <Navigate to="/profile" replace={true} />;
}
return children ? children : <Outlet />;
};
export default ProtectedRoute;
The purpose of this implementation is to ensure that when accessing any authenticated page, the user remains on that page rather than being redirected initially from /login to /profile.