createLazyFileRoute with beforeLoad

[kyusungpark]

Hi, I am using createLazyFileRoute to lazy load bunch of my routes, but I would also like to use beforeLoad for RBAC before navigating to a page. It looks like beforeLoad is not available for lazy routes and I have to use createFileRoute which has beforeLoad available.

Currently, I would like to do somethin like below:

export const Route = createLazyFileRoute('/_authenticated/dashboard/users/')({
  component: UserDashboard,
  // beforeLoad: ({ context }) => {
  //   const { role } = context;

  //   if (role !== 'admin') {
  //     throw redirect({ to: '/_authenticated/dashboard' });
  //   }
  // },
});

Is there an option where I can use both lazy loading + beforeLoad to handle RBAC?

[kyusungpark]

I found this link for virtual routes. Does this mean that I have to 2 files (1 createFileRoute and 1 createLazyFileRoute) for every single route that needs beforeLoad?

[schiller-manuel]

the section above that is the most relevant one for you: https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#example-code-splitting-with-lazytsx

and yes, you create 2 files in that case.
alternatively, you could also enable automatic code splitting so you don't have to do anything manually.

[kyusungpark]

Thank you for the help! I decided to go with automatic code splitting.