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:
Then I also have a child route:
But when I open the child page I get error:
Why is this happening?
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?
