From ee9c9bbc9ff12cd4d55012554232cb7e9bda33d8 Mon Sep 17 00:00:00 2001
From: Alaister Young <10985857+alaister@users.noreply.github.com>
Date: Fri, 8 May 2026 15:19:46 +0800
Subject: [PATCH] fix(studio): expose router.route in next/router compat shim
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Next's pages-router useRouter() returns both \`pathname\` and \`route\`
holding the bracketed route pattern (always the same value in pages
mode). Our compat shim only exposed \`pathname\`, so studio call sites
that read \`router.route\` (AppLayout/BranchLink, AppLayout/ProjectDropdown)
got \`undefined\` and crashed when sanitizeRoute() did \`route.split('/')\`.
Surfaced when opening the project selector dropdown — BranchLink
errored at render and tripped the route's ErrorBoundary.

Mirror \`pathname\` into \`route\` in both shims (next/router and
next/compat/router).
---
 apps/studio/compat/next/compat/router.ts | 6 +++++-
 apps/studio/compat/next/router.ts        | 9 ++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/studio/compat/next/compat/router.ts b/apps/studio/compat/next/compat/router.ts
index a208e9dfa28..09f6aaf564d 100644
--- a/apps/studio/compat/next/compat/router.ts
+++ b/apps/studio/compat/next/compat/router.ts
@@ -22,8 +22,12 @@ export function useRouter() {
   const params = useParams({ strict: false })
   const search = useSearch({ strict: false })
   const leafRouteId = matches[matches.length - 1]?.routeId ?? location.pathname
+  const pathPattern = toNextPathPattern(leafRouteId)
   return {
-    pathname: toNextPathPattern(leafRouteId),
+    pathname: pathPattern,
+    // Match pages-router: `route` mirrors `pathname` (the bracketed
+    // pattern). Studio call sites read `router.route` directly.
+    route: pathPattern,
     query: { ...params, ...search },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     push: (path: string) => router.navigate({ to: path as any }),
diff --git a/apps/studio/compat/next/router.ts b/apps/studio/compat/next/router.ts
index 5316054d625..eb818f871ec 100644
--- a/apps/studio/compat/next/router.ts
+++ b/apps/studio/compat/next/router.ts
@@ -23,8 +23,15 @@ export function useRouter() {
   const params = useParams({ strict: false })
   const search = useSearch({ strict: false })
   const leafRouteId = matches[matches.length - 1]?.routeId ?? location.pathname
+  const pathPattern = toNextPathPattern(leafRouteId)
   return {
-    pathname: toNextPathPattern(leafRouteId),
+    pathname: pathPattern,
+    // Next's pages-router exposes `route` and `pathname` as the same value
+    // — the route pattern with bracketed dynamic segments. Some studio
+    // code (e.g. AppLayout/BranchLink, AppLayout/ProjectDropdown) reads
+    // `router.route` specifically; without this it's `undefined` and
+    // downstream `.split('/')` calls crash.
+    route: pathPattern,
     query: { ...params, ...search },
     asPath: location.href,
     basePath: router.basepath ?? '',