T
TanStack•8mo ago
foreign-sapphire

Before load not working in child routes

In the before load in the _authed.tsx I have it checking to see if the user is authenticated. _authed.tsx 
import { createFileRoute, Link } from "@tanstack/react-router";

export const Route = createFileRoute("/_authed")({
  beforeLoad: ({ context }) => {
    if (!context.user) {
      console.log("🚀 ~ Route ~ context.user:", !context.user);
      throw new Error("Not authenticated");
    }
  },
  errorComponent: ({ error }) => {
    if (error.message === "Not authenticated") {
      return (
        <div className="flex items-center justify-center p-12">
          <Link to="/signin" replace>
            Sign in
          </Link>
        </div>
      );
    }

    throw error;
  },
});
import { createFileRoute, Link } from "@tanstack/react-router";

export const Route = createFileRoute("/_authed")({
  beforeLoad: ({ context }) => {
    if (!context.user) {
      console.log("🚀 ~ Route ~ context.user:", !context.user);
      throw new Error("Not authenticated");
    }
  },
  errorComponent: ({ error }) => {
    if (error.message === "Not authenticated") {
      return (
        <div className="flex items-center justify-center p-12">
          <Link to="/signin" replace>
            Sign in
          </Link>
        </div>
      );
    }

    throw error;
  },
});
But when a unauthed user tries to go to "/dashboard" they don't get the error state unless there is a beforeload on the route (which is the case when I go to "/game-history"), as shown in the video attached. 
// in game-history route
  beforeLoad: ({ context }) => {
    if (!context.user) {
      throw new Error("Not authenticated");
    }
  },
// in game-history route
  beforeLoad: ({ context }) => {
    if (!context.user) {
      throw new Error("Not authenticated");
    }
  },
dashboard.tsx 
import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
import { Button } from "~/lib/components/ui/button";

export const Route = createFileRoute("/_authed/dashboard")({
  component: DashboardLayout,
});

function DashboardLayout() {
  return (
    <div className="flex flex-col gap-4 p-4">
      <h1 className="text-4xl font-bold">Dashboard Layout</h1>
      <div className="flex items-center gap-2">
        This is a protected layout:
        <pre className="rounded-md border bg-card p-1 text-card-foreground">
          routes/dashboard.tsx
        </pre>
      </div>
      <Button type="button" asChild className="w-fit" size="lg">
        <Link to="/">Back to Home</Link>
      </Button>
      <Outlet />
    </div>
  );
}
import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
import { Button } from "~/lib/components/ui/button";

export const Route = createFileRoute("/_authed/dashboard")({
  component: DashboardLayout,
});

function DashboardLayout() {
  return (
    <div className="flex flex-col gap-4 p-4">
      <h1 className="text-4xl font-bold">Dashboard Layout</h1>
      <div className="flex items-center gap-2">
        This is a protected layout:
        <pre className="rounded-md border bg-card p-1 text-card-foreground">
          routes/dashboard.tsx
        </pre>
      </div>
      <Button type="button" asChild className="w-fit" size="lg">
        <Link to="/">Back to Home</Link>
      </Button>
      <Outlet />
    </div>
  );
}
Do I need a before load for each route? cause to me that seems wrong
No description

game-history.tsx

0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?