Passing context to a component in separate file? / Accessing useRouteContext

Is there any guidance to this? I'd like to have a layout that i can use a separate routes. This has a toolbar but want to render different things in the toolbar depending on the route .

I'd like to access some info in context to pass to params on Navigate

I tried to call useRouteContext in the layout but got this error

/ Invariant failed: useMatch("/authenticated/$teamId/properties") is being called in a component that is meant to render the '/authenticated/$teamId/properties/map' route. Did you mean to 'useMatch("/authenticated/$teamId/properties", { strict: false })' or 'useRoute("/authenticated/$teamId/properties")' instead?

/ Invariant failed: useMatch("/authenticated/$teamId/properties") is being called in a component that is meant to render the '/authenticated/$teamId/properties/map' route. Did you mean to 'useMatch("/authenticated/$teamId/properties", { strict: false })' or 'useRoute("/authenticated/$teamId/properties")' instead?

Due to react-refresh issues I moved the layout to a separate module, but wondering how to type this in the layout.

const propertiesRoute = new Route({
    getParentRoute: () => teamIdRoute,
    path: 'properties',
    component: ({ useRouteContext }) => <DataEntityLayout />,
})

const propertiesRoute = new Route({
    getParentRoute: () => teamIdRoute,
    path: 'properties',
    component: ({ useRouteContext }) => <DataEntityLayout />,
})

TanStack•3y ago•

15 replies

colossal-harlequin

Passing context to a component in separate file? / Accessing useRouteContext

/ Invariant failed: useMatch("/authenticated/$teamId/properties") is being called in a component that is meant to render the '/authenticated/$teamId/properties/map' route. Did you mean to 'useMatch("/authenticated/$teamId/properties", { strict: false })' or 'useRoute("/authenticated/$teamId/properties")' instead?

/ Invariant failed: useMatch("/authenticated/$teamId/properties") is being called in a component that is meant to render the '/authenticated/$teamId/properties/map' route. Did you mean to 'useMatch("/authenticated/$teamId/properties", { strict: false })' or 'useRoute("/authenticated/$teamId/properties")' instead?

Due to react-refresh issues I moved the layout to a separate module, but wondering how to type this in the layout.

const propertiesRoute = new Route({
    getParentRoute: () => teamIdRoute,
    path: 'properties',
    component: ({ useRouteContext }) => <DataEntityLayout />,
})

const propertiesRoute = new Route({
    getParentRoute: () => teamIdRoute,
    path: 'properties',
    component: ({ useRouteContext }) => <DataEntityLayout />,
})

Passing context to a component in separate file? / Accessing useRouteContext

Similar Threads

Passing context to a component in separate file? / Accessing useRouteContext

Similar Threads

Similar Threads

Similar Threads