T
TanStack•5mo ago
molecular-blue

Invariant failed getting loading data in child component.

I am on version 1.16.6, the newest version seems to make some breaking changes. So I have not been able to update yet. I have a parent route: 
export const Route = createFileRoute(
  "/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId",
)({
  component: ProfileComponent,
  loader: async ({ params }) => {
   return "some data"
  },
});
export const Route = createFileRoute(
  "/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId",
)({
  component: ProfileComponent,
  loader: async ({ params }) => {
   return "some data"
  },
});
Then I also have a child route: 
import { Route as ParentRoute } from "./$companyId.profile.$profileId";

export const Route = createFileRoute(
  "/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId/website",
)({
  component: () => {
    const parentData = ParentRoute.useLoaderData();
    
    return <div></div>;
  },
});
import { Route as ParentRoute } from "./$companyId.profile.$profileId";

export const Route = createFileRoute(
  "/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId/website",
)({
  component: () => {
    const parentData = ParentRoute.useLoaderData();
    
    return <div></div>;
  },
});
But when I open the child page I get error: 
Invariant failed: useMatch("/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId") is being called in a component that is meant to render the '/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId/website' route. Did you mean to 'useMatch("/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId", { strict: false })' or 'useRoute("/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId")' instead?
Invariant failed: useMatch("/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId") is being called in a component that is meant to render the '/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId/website' route. Did you mean to 'useMatch("/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId", { strict: false })' or 'useRoute("/_dashboard/organization/$organizationSlug/company/$companyId/profile/$profileId")' instead?
Why is this happening?
4 Replies
genetic-orange
genetic-orange•5mo ago
can you provide a minimal complete example? ideally by forking one of the existing stackblitz examples
molecular-blue
molecular-blueOP•5mo ago
I have tried to recreate on StackBlitz, but it works fine. So I am thinking it might be something about my version? But just to clarify. I should be able to use the useLoaderData, from a parent route, inside a child route correct? Maybe something about my file setup is making it not work.
genetic-orange
genetic-orange•5mo ago
it should work for child routes I think I checked again, I cannot find this error message in our source code
molecular-blue
molecular-blueOP•5mo ago
Uhm That seems weird Was it on version 1.16.6 you checked it?

Did you find this page helpful?