Loader execution even if a route is wrapped in a navigation guard

[mod7ex]

i have noticed that loaders are executed if a route is wrapped in a navigation guard
i have a navigation guard like this

import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { useAuth } from "~/hooks";

const RequireAuth = () => {
    const authenticated = useAuth();

    const navigate = useNavigate();

    const location = useLocation();

    if (!authenticated) navigate("/login", { replace: true, state: { from: location } });

    if (!authenticated) return null;

    return <Outlet />;
};

export default RequireAuth;

<Route element={<RequireAuth />}>
    <Route path="dashboard" element={<h1>Hello</h1>} loader={loadUsers} />
</Route>

i think loadUsers shouldn't be ran if the user isn't authenticated, Thanks and please correct me if i'm wrong

[timdorr]

Loaders are run asynchronously and in parallel before any rendering of your elements occurs. Basically, RequireAuth is too late here. What you could be using is a loader on that top level element to check for auth and redirect. And your other loaders would need to check for auth before running as well.

There is a proposal being worked on to make this much easier: #9564