metropolitan-bronze

Beginner: wrong beforeload being trigger ?

Hey guys, so I have a file tree as follow:

|-(teams)
| |-teams.tsx
| |-teams_.$teamId.tsx
| |-teams_.$teamId_.settings.tsx
| |-teams_.$teamId_.invitations_.$token.accept.tsx

|-(teams)
| |-teams.tsx
| |-teams_.$teamId.tsx
| |-teams_.$teamId_.settings.tsx
| |-teams_.$teamId_.invitations_.$token.accept.tsx

and whenever I access the page teams_.$teamId_.invitations_.$token.accept.tsx the beforeload of teams_.$teamId.tsx is being called. Is this normal ? if so how could I truned this off. I tried to look in the docs for this but I couldn't find anything. Thanks in advanced 🙌

16 Replies

optimistic-gold•10mo ago

all beforeLoad functions of all routes that are in the current hierachy are executed upon each navigation you cannot turn this off what does it do in your case? there are several options depending on the use case

metropolitan-bronzeOP•10mo ago

Thanks for getting in touch. I am just using the beforeLoad to check if my user is allowed to view page. But because the beforeLoad of the/teams/:id page will get called first, the beforeLoad of the /teams/:id/invitations/:token page will never be called. /teams/:id

export const Route = createFileRoute("/(teams)/teams_/$teamId")({
  beforeLoad: async ({ context }) => {
    permissions.team.view(context.user);
  },
});

export const Route = createFileRoute("/(teams)/teams_/$teamId")({
  beforeLoad: async ({ context }) => {
    permissions.team.view(context.user);
  },
});

/teams/:id/invitations/:token

export const Route = createFileRoute(
  "/(teams)/teams_/$teamId_/invitations_/$token/accept",
)({
  beforeLoad: ({ context, params }) => {
    permissions.team.acceptInvite(context.user, Route.fullPath);
  },
});

export const Route = createFileRoute(
  "/(teams)/teams_/$teamId_/invitations_/$token/accept",
)({
  beforeLoad: ({ context, params }) => {
    permissions.team.acceptInvite(context.user, Route.fullPath);
  },
});

optimistic-gold•10mo ago

sounds like your accept route should not be under the permission check then? so move it out of there

metropolitan-bronzeOP•10mo ago

so you want me to move it out of the /(teams)/teams_/$teamId directory ?

optimistic-gold•10mo ago

its parent must be something that does not check the permission there are other workarounds

metropolitan-bronzeOP•10mo ago

ok I see, but in this case all of the teams routes got a auth check.

optimistic-gold•10mo ago

you could also disable the auth check if the accept is currently matched

optimistic-gold•10mo ago

like this https://stackblitz.com/edit/tanstack-router-crn2384c?file=src%2Froutes%2Ffoo%2Fbar.tsx,src%2Froutes%2Ffoo%2Fhello.tsx,src%2Froutes%2Ffoo.tsx&preset=node

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

optimistic-gold•10mo ago

export const Route = createFileRoute('/foo')({
  beforeLoad: (opts) => {
    if (opts.matches.find((m) => m.routeId === '/foo/hello')) {
      return;
    } else {
      // check auth
    }
  },
});

export const Route = createFileRoute('/foo')({
  beforeLoad: (opts) => {
    if (opts.matches.find((m) => m.routeId === '/foo/hello')) {
      return;
    } else {
      // check auth
    }
  },
});

metropolitan-bronzeOP•10mo ago

Awesome, that makes a lot of sense Thanks for explaining @Manuel Schiller 🙌

optimistic-gold•10mo ago

there are more options for sure you could also put the auth check into a pathless route

metropolitan-bronzeOP•10mo ago

Yes Indeed, I will play around with the code to see which one fit better

optimistic-gold•10mo ago

https://stackblitz.com/edit/tanstack-router-cgnbflgz?file=src%2Froutes%2Ffoo%2Fhello.tsx,src%2Froutes%2Ffoo%2F_auth.tsx&preset=node

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

metropolitan-bronzeOP•10mo ago

very handy thanks

optimistic-gold•10mo ago

IMO the pathless route is cleaner but both work

metropolitan-bronzeOP•10mo ago

yes I agree

Gaming

Programming

Beginner: wrong beforeload being trigger ?

Did you find this page helpful?