dead-brown

How to get route context correctly typed?

Hi everyone,

could someone help me understand how

match.routeContext

match.routeContext

gets its type? I was reading the documentation about "Processing Accumulated Route Context" and from my understanding the type should extend the Router Context defined in

createRootRouteWithContext

createRootRouteWithContext

. But I get an error if I try to access the properties that I define in Router Context. Should I define the correct type somewhere else?

Edit: I made a codesandbox

This is my code:

// src/routes/__root.tsx
type RouterContext = {
  title?: string;
};
export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => {
  const matches = useMatches();
  const matchWithTitle = [...matches]
    .reverse()
    .find((d) => d.routeContext.title !== undefined); // <---- Here I get the type error 
    // ...
  },
});

// src/routes/__root.tsx
type RouterContext = {
  title?: string;
};
export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => {
  const matches = useMatches();
  const matchWithTitle = [...matches]
    .reverse()
    .find((d) => d.routeContext.title !== undefined); // <---- Here I get the type error 
    // ...
  },
});

TanStack•2y ago

dead-brown

How to get route context correctly typed?

Hi everyone,

could someone help me understand how

match.routeContext

match.routeContext

gets its type? I was reading the documentation about "Processing Accumulated Route Context" and from my understanding the type should extend the Router Context defined in

createRootRouteWithContext

createRootRouteWithContext

. But I get an error if I try to access the properties that I define in Router Context. Should I define the correct type somewhere else?

Edit: I made a codesandbox

This is my code:

// src/routes/__root.tsx
type RouterContext = {
  title?: string;
};
export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => {
  const matches = useMatches();
  const matchWithTitle = [...matches]
    .reverse()
    .find((d) => d.routeContext.title !== undefined); // <---- Here I get the type error 
    // ...
  },
});

// src/routes/__root.tsx
type RouterContext = {
  title?: string;
};
export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => {
  const matches = useMatches();
  const matchWithTitle = [...matches]
    .reverse()
    .find((d) => d.routeContext.title !== undefined); // <---- Here I get the type error 
    // ...
  },
});

How to get route context correctly typed?

Similar Threads

How to get route context correctly typed?

Similar Threads

Similar Threads

Similar Threads