Merge pull request #1168 from objectstack-ai/copilot/fix-routing-issue-after-studio-migration

fix(studio): honor Vite BASE_URL as TanStack Router basepath

Author: hotlong

apps/studio/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @objectstack/studio
 
+## Unreleased
+
+### Patch Changes
+
+- Fix TanStack Router basepath resolution when Studio is mounted under a sub-path
+  (e.g. `/_studio/` via the CLI `--ui` flag). Previously, routes such as
+  `/_studio/packages` or `/_studio/:package/objects/:name` failed to match —
+  the router treated the mount prefix as a `$package` route parameter, producing
+  "Not Found" errors. The router now derives `basepath` from Vite's
+  `import.meta.env.BASE_URL`, which works transparently for both root and
+  sub-path deployments.
+
 ## 4.0.4
 
 ### Patch Changes

apps/studio/src/router.ts

@@ -10,7 +10,31 @@
 import { createRouter } from '@tanstack/react-router';
 import { routeTree } from './routeTree.gen';
 
-export const router = createRouter({ routeTree });
+/**
+ * Compute the router basepath from Vite's `BASE_URL`.
+ *
+ * When Studio is mounted under a sub-path (e.g. `/_studio/` via the CLI `--ui`
+ * flag, which sets `VITE_BASE=/_studio/`), TanStack Router must strip that
+ * prefix before matching route patterns. Otherwise URLs such as
+ * `/_studio/packages` are mis-interpreted as `/$package="_studio"/packages`.
+ *
+ * Vite exposes the configured base as `import.meta.env.BASE_URL`:
+ *   - Root deployment: `'/'` → basepath `'/'` (no-op)
+ *   - Sub-path deployment: `'/_studio/'` → basepath `'/_studio'`
+ *
+ * TanStack Router expects the basepath WITHOUT a trailing slash (except for
+ * the root `'/'`), so we normalise accordingly.
+ */
+function resolveBasepath(): string {
+  const base = (import.meta.env.BASE_URL ?? '/').trim();
+  if (!base || base === '/' || base === './') return '/';
+  return base.endsWith('/') ? base.slice(0, -1) : base;
+}
+
+export const router = createRouter({
+  routeTree,
+  basepath: resolveBasepath(),
+});
 
 // Register things for type-safety
 declare module '@tanstack/react-router' {