useParams is not propagating
Hi so we finally updated to the latest version of Tanstack Start ... but are experiencing follow problem:
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
And I reaaaaaaaly would like to avoid making useEffects for no reason
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} />;
},
});
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} />;
},
});
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>
);
}
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>
);
}
0 Replies