Making `handle` dynamic-ish? | Remix | Page 1

Y'all got any idea about how to make the handle "dynamic"? I have a shared layout that renders tabs, each one of those tabs leads to a sub-route. I have a mechanism to detect that a sub-route wants to be in the tabs:

  const matches = useMatches();

  const tabs = matches.find((match) => {
    const handle = match.handle as NavigationItemForTabs | {};

    if (handle && "tabsAsRoutes" in handle) {
      return match;
    }
  });

  const tabsAsRoutes =
    tabs && (tabs?.handle as NavigationItemForTabs).tabsAsRoutes;

The problem? Well, my handle in the sub-routes is always defined upfront, such as this:

export const handle: NavigationItemForTabs = {
  tabsAsRoutes: [
    { title: "Tracks", route: "/user/tracks" },
    { title: "Achievements", route: "/user/achievements" },
  ],
};

When does handle "run" exactly? Can I do server-side functions on it? Does it run before loader, and can I then maybe get data from there?

#Making `handle` dynamic-ish?