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

/test/$editOrganizationId

and

/differentTest/$editOrganizationId

/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

/test/$editOrganizationId

/differentTest/$editOrganizationId

/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?

TanStack•6mo ago•

2 replies

precious-lavender

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

/test/$editOrganizationId

and

/differentTest/$editOrganizationId

/differentTest/$editOrganizationId

/test/$editOrganizationId

/test/$editOrganizationId

/differentTest/$editOrganizationId

/differentTest/$editOrganizationId

Lazy Loaded Route order of operations.

Similar Threads

Lazy Loaded Route order of operations.

Similar Threads

Similar Threads

Similar Threads