variable-lime

Nested route context doesn't update.

Hi. I've forked Authenticated routes with context example from tanstack router docs. I've switched using useAuth to Route.useRouteContext() which is modified in dashboard.tsx in beforeLoad so it returns typesafe user -

 return {
      ...context,
      auth: {
        setUser: context.auth.setUser,
        isAuthenticated: true,
        user: context.auth.user,
      },

 return {
      ...context,
      auth: {
        setUser: context.auth.setUser,
        isAuthenticated: true,
        user: context.auth.user,
      },

Everything seems to work the same (we gain access to typesafe user) - things break when I try to call logout from a nested component which import Route from './dashboard then the setState doesn't seem to do anything. https://stackblitz.com/edit/tanstack-router-n9pza6?file=src%2Froutes%2Fdashboard.tsx

Stanisław

StackBlitz

Router Authenticated Routes Context Example (forked) - StackBlitz

Run official live example code for Router Authenticated Routes Context, created by Tanstack on StackBlitz

1 Reply

fascinating-indigo•2y ago

If you look at the handleLogout function on the dashboard page, you'll notice that it calls navigate after the auth.setUser call.

const handleLogout = () => {
  auth.setUser(null);
  navigate({ to: '/' });
};

const handleLogout = () => {
  auth.setUser(null);
  navigate({ to: '/' });
};

You could also look at possible calling, router.invalidate() as well to see if that makes a difference. Your logout call should be something you control... You could even return a logout method from the useAuth() hook to simplify this for you.

Gaming

Programming

Nested route context doesn't update.

Did you find this page helpful?