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
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.
dashboard.tsx
Do I need a before load for each route? cause to me that seems wrong
_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
game-history.tsx1.56KB
