T
TanStack•22h ago
optimistic-gold

Lazy Loaded Route order of operations.

export const useOrganizationsByIdInEditOrganization = () => {
  const { editOrganizationId } = useParams({
    strict: false,

    select: params => {
      if (!params.editOrganizationId)
        throw
          'Cannot use useOrganizationsByIdInEditOrganization hook without editOrganizationId',
      return { editOrganizationId: params.editOrganizationId };
    },
  });

return editOrganizationId;
}
export const useOrganizationsByIdInEditOrganization = () => {
  const { editOrganizationId } = useParams({
    strict: false,

    select: params => {
      if (!params.editOrganizationId)
        throw
          'Cannot use useOrganizationsByIdInEditOrganization hook without editOrganizationId',
      return { editOrganizationId: params.editOrganizationId };
    },
  });

return editOrganizationId;
}
I have this hook that I’m using on the routes /test/$editOrganizationId and /differentTest/$editOrganizationId The hook works perfectly — it can’t be used on routes that don’t have $editOrganizationId, and the developer is aware of that because they’ll see the error thrown. Navigating between different routes works fine; however, when I enter a lazy-loaded route [THAT IS NOT USING THIS HOOK] from /test/$editOrganizationId or /differentTest/$editOrganizationId, I still get the thrown error. So, the issue only happens when entering the lazy route from a route that uses my custom hook. Is there anything i can do guys? Are yo aware of this error in tanstack router?
1 Reply
optimistic-gold
optimistic-goldOP•22h ago
As there is no throw when entering the standard route it seems like the link change is getting submitet to stack before the already rendered component unmounts, it seems like the broken behavior from tanstkac router but im not sure

Did you find this page helpful?