Protected route renders without authentication when guard is omitted

Symptom

When a route intended to be protected by a custom authentication guard is accessed directly, the protected page renders even though the user is not authenticated.

The goal is to understand why the guard fails to prevent access and what conditions allow the route to become publicly exposed.

Constraints include React Router v6’s lack of a built‑in RequireAuth component, reliance on client‑side state for the guard, and the impact of server‑side rendering or lazy‑loaded boundaries on guard execution.

• What strategies ensure the guard runs before any protected UI is sent to the client, especially during SSR?
• How should a guard be positioned relative to React.lazy and Suspense to avoid pre‑loading the protected component?
• Is there a recommended pattern that works consistently across client‑side and server‑side rendering without requiring custom redirect logic?