Route Transition Flickering in React Router v7

I’m currently developing a project utilizing React Router v7 framework where I need to implement protected routes. While I’ve successfully implemented the protection mechanism, I’m encountering an issue where the protected page’s layout briefly flashes before the redirect occurs. I want to prevent this behavior by ensuring the redirect happens before any page rendering takes place. Below are my route.jsx and protected.jsx implementations:

import { Outlet, useNavigate } from "react-router";
import { useDispatch } from "react-redux";
import { getTokenFromCookie } from "./tokenServices";
import { setOpenAuthModal } from "../redux/slices/authSlice";

const ProtectedRoute = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const token = getTokenFromCookie();

  useEffect(() => {
    if (!token) {
      dispatch(setOpenAuthModal());
      navigate("/");
    }
  }, [token, dispatch, navigate]);

  return token ? <Outlet /> : null;
};

export default ProtectedRoute;

import { index, layout, prefix, route } from "@react-router/dev/routes";

export default [
  layout("./layouts/AppLayout.jsx", [
    index("routes/home/route.jsx"),
    route("/support", "routes/support/route.jsx"),
    route("/rooms/:villaId", "routes/room/route.jsx"),
    route("/archive/:cityName", "routes/archive-city/route.jsx"),

    layout("./services/auth/ProtectedRoute.jsx", [
      route("/profile", "routes/profile/dashboard/route.jsx"),
      route("/wallet", "routes/wallet/route.jsx"),
      route("/invite-friends", "routes/invite-friends/route.jsx"),
      route("/trips", "routes/trips/route.jsx"),
      ...prefix("/comments", [
        index("routes/comments/route.jsx"),
        route("/register/:vilaId", "routes/profile/registerComment/route.jsx"),
      ]),

      ...prefix("/host", [
        route("/profile", "routes/host/dashboard/route.jsx"),
        ...prefix("/comments", [
          index("routes/host/comments/route.jsx"),
          route(
            "/:commentId",
            "routes/host/comments/residenceHostComments/route.jsx",
          ),
        ]),
        route("/list-of-resisdence", "routes/host/listOfResisdence/route.jsx"),
        route("/statistics", "routes/host/statistics/route.jsx"),

        // layout("./services/auth/ProtectedReservationHost.jsx", [
        layout("./layouts/hostRegistration/HostRegistrationLayout.jsx", [
          ...prefix("/residence-registration", [
            route(
              "/specifications",
              "routes/host/residence-registration/specifications/create/route.jsx",
            ),
            route(
              "edit/specifications/:registrationId",
              "routes/host/residence-registration/specifications/edit/route.jsx",
            ),
            route(
              "edit/rooms/:registrationId",
              "routes/host/residence-registration/rooms/route.jsx",
            ),
            route(
              "edit/images/:registrationId",
              "routes/host/residence-registration/images/route.jsx",
            ),
            route(
              "edit/facilities/:registrationId",
              "routes/host/residence-registration/facilities/route.jsx",
            ),
            route(
              "edit/neighborhood/:registrationId",
              "routes/host/residence-registration/neighborhood/route.jsx",
            ),
            route(
              "edit/rules/:registrationId",
              "routes/host/residence-registration/rules/route.jsx",
            ),
            route(
              "edit/prices/:registrationId",
              "routes/host/residence-registration/prices/route.jsx",
            ),
            route(
              "edit/documents/:registrationId",
              "routes/host/residence-registration/documents/route.jsx",
            ),
          ]),
        ]),
        // ]),
      ]),

      layout("routes/reservation/route.jsx", [
        route(
          "reservation/checkout/:reserveId",
          "routes/reservation/check/route.jsx",
        ),
        route(
          "reservation/payment/:reserveId",
          "routes/reservation/payment/route.jsx",
        ),
        route(
          "reservation/delivery/:reserveId",
          "routes/reservation/delivery/route.jsx",
        ),
      ]),
    ]),
  ]),
  // layout("./services/auth/ProtectedRoute.jsx", [
  //   route("/invoice/reserve/:reserveId", "routes/invoice-reserve/route.jsx"), // ✅ Invoice route here
  // ]),
];