Private routes are protected however they appear as blank page. Instead let’s redirect users from those pages, if they are not logged in.
// components/routes/RedirectRoute.js
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
export default function RedirectRoute() {
const [count, setCount] = useState(3);
const navigate = useNavigate();
useEffect(() => {
const interval = setInterval(() => {
setCount((currentCount) => --currentCount);
}, 1000);
// redirect once count is equal to 0
count === 0 && navigate("/");
// cleanup
return () => clearInterval(interval);
}, [count]);
return (
<div
className="d-flex justify-content-center align-items-center vh-100"
style={{ marginTop: "-7%" }}
>
<h2>Please login. Redirecting in {count} second.</h2>
</div>
);
}
Now use in PrivateRoute.js
return ok ? <Outlet /> : <RedirectRoute />;