In latest release 1.28.4 useRouteContext()-hook returns undefined on first start

Hey

in latest release 1.28.4 the behavior of

useRouteContext

useRouteContext

beforeLoad

beforeLoad

has changed.

I return the user from

beforeLoad

beforeLoad

, but the

useRouteContext-hook

useRouteContext-hook

return

undefined

undefined

in the

component

component

export const Route = createFileRoute('/')({
  beforeLoad: () => ({ user: 'Armin' }),
  component: HomeComponent,
});

function HomeComponent() {
  console.log('render HomeComponent');
  const ctx = Route.useRouteContext(); // ctx is undefined
  console.log(ctx);
  return (
    <div className="p-2">
      <h3>Welcome Home! {ctx.user}</h3> // this fails!!! if I change it to ctx?.user the user-name appears, but only after joining the route again
    </div>
  );
}

export const Route = createFileRoute('/')({
  beforeLoad: () => ({ user: 'Armin' }),
  component: HomeComponent,
});

function HomeComponent() {
  console.log('render HomeComponent');
  const ctx = Route.useRouteContext(); // ctx is undefined
  console.log(ctx);
  return (
    <div className="p-2">
      <h3>Welcome Home! {ctx.user}</h3> // this fails!!! if I change it to ctx?.user the user-name appears, but only after joining the route again
    </div>
  );
}

Please checkout the reproduction.

https://stackblitz.com/edit/tanstack-router-cfgel4?file=src%2Froutes%2Findex.tsx

Update
The issue was introduced in 1.28.2, maybe in https://github.com/TanStack/router/commit/d09db60415b4a6e8b32ec771f53015666a5c52e2

Thanks

TanStack•2y ago•

3 replies

verbal-lime

In latest release 1.28.4 useRouteContext()-hook returns undefined on first start

Hey

in latest release 1.28.4 the behavior of

useRouteContext

useRouteContext

beforeLoad

beforeLoad

has changed.

I return the user from

beforeLoad

beforeLoad

, but the

useRouteContext-hook

useRouteContext-hook

return

undefined

undefined

in the

component

component

export const Route = createFileRoute('/')({
  beforeLoad: () => ({ user: 'Armin' }),
  component: HomeComponent,
});

function HomeComponent() {
  console.log('render HomeComponent');
  const ctx = Route.useRouteContext(); // ctx is undefined
  console.log(ctx);
  return (
    <div className="p-2">
      <h3>Welcome Home! {ctx.user}</h3> // this fails!!! if I change it to ctx?.user the user-name appears, but only after joining the route again
    </div>
  );
}

export const Route = createFileRoute('/')({
  beforeLoad: () => ({ user: 'Armin' }),
  component: HomeComponent,
});

function HomeComponent() {
  console.log('render HomeComponent');
  const ctx = Route.useRouteContext(); // ctx is undefined
  console.log(ctx);
  return (
    <div className="p-2">
      <h3>Welcome Home! {ctx.user}</h3> // this fails!!! if I change it to ctx?.user the user-name appears, but only after joining the route again
    </div>
  );
}

In latest release 1.28.4 useRouteContext()-hook returns undefined on first start

Similar Threads

In latest release 1.28.4 useRouteContext()-hook returns undefined on first start

Similar Threads

Similar Threads

Similar Threads