TanStackT
TanStack•12mo ago•
47 replies
efficient-indigo

App unmounts on page navigation

With Auth Provider when doing page navigation with createRootRouteWithContext seems like <Outlet /> gets remounted each time. I hit this issue with Convex Auth, so I tried to write my own Provider with Supabase and noticed same issue.
It results in disappearance of shared components like <AppSidebar /> and re-checking auth each time page navigation happens.

_authed.tsx:
export const Route = createFileRoute('/_authed')({
  beforeLoad: ({ context }) => {
    const { session } = context.auth;
    if (!session) {
      throw redirect({ to: '/signin' });
    }
  },
  component: AuthenticatedLayoutRoute,
});

function AuthenticatedLayoutRoute() {
  return <Outlet />;
}


_layout.tsx for authed pages
export const Route = createFileRoute('/_authed/_layout')({
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main className="flex-1">
        <SidebarTrigger />
        <Outlet />
      </main>
    </SidebarProvider>
  );
}


app.tsx:
function InnerApp() {
  const auth = useAuth();
  return <RouterProvider router={router} context={{ auth }} />;
}

export default function App() {
  return (
    <AuthProvider supabase={supabase}>
      <InnerApp />
    </AuthProvider>
  );
}
Was this page helpful?