TanStackT
TanStack•4mo ago
faint-white

useParams is not propagating

Hi so we finally updated to the latest version of Tanstack Start ... but are experiencing follow problem:

import { createFileRoute, Outlet } from "@tanstack/react-router";
import { BaseLayout } from "~/templates/layout/BaseLayout";
import z from "zod";

export const Route = createFileRoute("/_authed/_base-layout")({
  params: z.object({
    projectId: z.string().optional(),
  }),
  component: () => {
    const { projectId } = Route.useParams();
    return <BaseLayout projectId={projectId} />;
  },
});

This is a layout we made, surrounding most of our application but when going to page /project/{projectId}, for some reason
the projectId is not propagating on our sidebar 

import { Outlet } from "@tanstack/react-router";
import Sidebar from "@/components/sidebar";
import { ModeToggle } from "@/components/mode-toggle";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";
import SyncableLogo from "@/assets/img/Syncable-Logo.svg";
import { isProduction } from "~/globals/urls";
import { ServerMaintenanceOverlay } from "~/components/ServerMaintenanceOverlay";
import { useSession } from "~/lib/getBetterAuthRequestClient";

const whitelistedEmails = [
  "example@email.com"
]

interface BaseLayoutProps {
  projectId?: string;
}

export function BaseLayout({ projectId }: BaseLayoutProps) {
  const data = useSession().data
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);

  return (
    <div className="relative flex h-screen overflow-hidden">
      {/* Background Effects */}
      <div className="absolute inset-0 bg-white dark:bg-black/40">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-full blur-3xl animate-pulse" />
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-r from-blue-500/20 to-pink-500/20 rounded-full blur-3xl animate-pulse delay-1000" />
      </div>

      <Sidebar
        projectId={projectId}
        isCollapsed={isSidebarCollapsed}
        onCollapse={() => setIsSidebarCollapsed(true)}
      />

      {/* Mobile overlay - only covers content area, not sidebar */}
      {!isSidebarCollapsed && (
        <div
          className="fixed top-0 right-0 bottom-0 bg-black/50 z-40 md:hidden"
          style={{ left: "16rem" }} // 64 * 4px = 256px = 16rem (sidebar width)
          onClick={() => setIsSidebarCollapsed(true)}
        />
      )}

      <div className="relative z-10 flex flex-col flex-1 overflow-hidden">
        <header className="flex items-center justify-between px-4 md:px-6 py-4 bg-white/80 dark:bg-white/10 backdrop-blur-sm border-b border-gray-200 dark:border-white/20">
          <div className="flex items-center gap-2 md:gap-4">
            {isSidebarCollapsed && (
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setIsSidebarCollapsed(false)}
                className="shrink-0 bg-white/80 dark:bg-white/10 backdrop-blur-sm hover:bg-gray-50 dark:hover:bg-white/20 rounded-2xl transition-all duration-300"
              >
                <Menu className="h-4 w-4" />
              </Button>
            )}
            <img src={SyncableLogo} alt="Syncable Logo" className="h-14" />
          </div>
          <div className="flex items-center space-x-2 md:space-x-4">
            <ModeToggle />
          </div>
        </header>
        <main className="flex-1 overflow-y-auto">
          {!whitelistedEmails.includes(data?.user?.email ?? '') ? (
            <ServerMaintenanceOverlay isVisible={isProduction} />
          ) : (
            <Outlet />
          )}
        </main>
      </div>
    </div>
  );
}



And I reaaaaaaaly would like to avoid making useEffects for no reason
Was this page helpful?