exotic-emerald

Should context work the same in client and server mode?

I think this might be a bug, or maybe im not understanding how context works. I'm overriding the context on a "loader" function, to render breadcrumbs. This works fine server side, but fails client side.

7 Replies

exotic-emeraldOP•2mo ago

export const Route = createRootRouteWithContext<{
  variable: string,
}>()({
  component: RootComponent,
})

function RootComponent() {
  const matches = useRouterState({ select: (s) => s.matches });
    
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        <ul>
          {matches.map((match) => (
            <li key={match.id}>
              {match.context.variable}
            </li>
          ))}
        </ul>
        <Outlet />
        <Scripts />
      </body>
    </html>
  )
}

export const Route = createRootRouteWithContext<{
  variable: string,
}>()({
  component: RootComponent,
})

function RootComponent() {
  const matches = useRouterState({ select: (s) => s.matches });
    
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        <ul>
          {matches.map((match) => (
            <li key={match.id}>
              {match.context.variable}
            </li>
          ))}
        </ul>
        <Outlet />
        <Scripts />
      </body>
    </html>
  )
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/animals/dogs/cocker')({
  component: RouteComponent,
  loader: ({ context }) => {
    context.variable = "Context /animals/dogs/cocker";
  }
})

function RouteComponent() {
  return <div>Hello "/animals/docs/cocker"!</div>
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/animals/dogs/cocker')({
  component: RouteComponent,
  loader: ({ context }) => {
    context.variable = "Context /animals/dogs/cocker";
  }
})

function RouteComponent() {
  return <div>Hello "/animals/docs/cocker"!</div>
}

exotic-emeraldOP•2mo ago

exotic-emeraldOP•2mo ago

repo: https://github.com/PupoSDC/start-bugs

national-gold•2mo ago

you cannot modify the context in a loader also, you cannot write to the context in general. you can only return updated values

exotic-emeraldOP•2mo ago

then i struggle to understand what is the point of the whole "match" system. if the context is different on every route, when can it possibly change? https://tanstack.com/router/latest/docs/framework/react/guide/router-context#processing-accumulated-route-context the inspiration to get me going on this direction is this section of the docs

Router Context | TanStack Router React Docs

TanStack Router's router context is a very powerful tool that can be used for dependency injection among many other things. Aptly named, the router context is passed through the router and down throug...

exotic-emeraldOP•2mo ago

like, in the example a function, getTitle, is used, but it's never explained how to define a different getTitle for every route

inc-lavender•2mo ago

@pupo I had added a getTitle function to context in beforeLoad in a parent route, but I've recently discovered after upgrading to Start 1.27.x that we get a serialization error related to that function. I don't know if that's expected (can't serialize a function) or if there's a current or potential future recommended way to return a function from beforeLoad in Start apps. For now, I moved the getTitle function I had been using out to a util function.

Gaming

Programming

Should context work the same in client and server mode?

Did you find this page helpful?