skills.rest
metabase
metabaseOFFICIAL
Explore all skills by this author →
Website𝕏@metabaseGitHub

metabase-data-app-routing

Adds client-side multi-page routing to Metabase data-app projects using DataAppRouter primitives.

49.0k|6.8k|Updated Feb 2, 2015
Search Tags:#Routing#data-app#iframe#metabase#client-side navigation#reAct#embedding-sdk
One-click install
npx skills add https://github.com/metabase/metabase --skill metabase-data-app-routing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: metabase-data-app-routing
Source: https://github.com/metabase/metabase/tree/main/skills/metabase-data-app-routing
Command: npx skills add https://github.com/metabase/metabase --skill metabase-data-app-routing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @metabase/embedding-sdk-react.

What problem does it solve?

Metabase data-app bundles cannot use react-router or any standard router library because of sandbox constraints, leaving developers without a way to build multi-page embedded apps. This Skill patches an existing data-app project to use the host-provided DataAppRouter, DataAppLink, and useDataAppLocation primitives for URL-driven page rendering.

Core Features & Use Cases

  • Router-free navigation: Implements multi-page routing with DataAppRouter, DataAppLink, and useDataAppLocation from @metabase/embedding-sdk-react/data-app, with no react-router dependency.
  • Path-based rendering patterns: Provides conditional rendering, programmatic navigation via navigate(), and manual path-parameter parsing with regex matching.
  • Default tab guarantee: Ensures the base path always renders the leftmost tab's content instead of a blank page.
  • Use Case: A developer has a scaffolded Metabase data-app showing a single dashboard and wants separate Overview, Customers, and Reports pages with shareable deep links like /customers/42 that survive reloads in both dev preview and production iframes.

Quick Start

Add multi-page routing to my existing Metabase data-app project using DataAppRouter with an overview page and a customer detail page.

Frequently Asked Questions about metabase-data-app-routing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add multiple pages to a Metabase data-app?▼

Wrap your App component in DataAppRouter from @metabase/embedding-sdk-react/data-app, then use useDataAppLocation to read the pathname and conditionally render pages. Use DataAppLink for navigation links instead of a router library.

Can I use react-router in a Metabase data-app bundle?▼

No, react-router and BrowserRouter or HashRouter must not be used inside a data-app bundle. They run their own setState flow that breaks under the Near Membrane sandbox's React batching, so use DataAppRouter and DataAppLink instead.

How do I parse URL path parameters without useParams?▼

Match the pathname from useDataAppLocation with a regular expression, such as pathname.match(/^\/customers\/(\d+)$/), and convert captured groups with Number(). You can factor repeated matching into a custom hook inside the bundle.

Why does my data-app show a blank page at the base path?▼

The base path / has no matching route branch, so nothing renders until a tab is clicked. Give / an explicit branch that renders the first tab, or fall back to the first tab when no path matches.

Why does routing work in dev but break in the production iframe?▼

The vite.config.ts likely lost @metabase/embedding-sdk-react/data-app from the external and output.globals settings, causing Vite to inline the package into the bundle. Restore the config from the data-app-template so the host-provided implementation is used.

Related Skills

Explore More Software Engineering Skills→
Ramakrishnan24689Ramakrishnan24689
5

init-codeapp

Initialize Power Apps Code App projects from official Microsoft templates.

Community
Advanced
pkoka888pkoka888
1

metabase-embedding

Generate signed JWT embed URLs for Metabase dashboards and questions.

Community
Intermediate
mrkhachaturovmrkhachaturov

convert-web-app

Convert standalone web apps into sandboxed-iframe MCP App resources.

Community
Advanced
Mesh-LLMMesh-LLM
3.1k

mesh-join

Connect and coordinate multiple mesh-llm nodes into a distributed mesh.

Official
Advanced