Sparkling
  • English

      • TanStack Router

      TanStack Router — a fully type-safe web router — ported onto Sparkling to drive native multi-page navigation. Each page is a separate LynxView with its own JS context; navigating between pages is a native container open, connected by a generated file-based route manifest.

      The full design, the feature support matrix, and the comparison with TanStack's own React Native effort are in the TanStack Router guide. These demos come from the tanstack-router-demo package.

      Web preview vs. on device

      The web preview runs the router live in your browser. In-page navigation (routes within one bundle) uses TanStack Router's in-memory history, so it works right here. Cross-page navigation opens a new native page through the Sparkling bridge, which only runs inside a Sparkling container — use the QR code tab to see it on device.

      Router on ReactLynx (single page)

      The feasibility spike: TanStack Router running on ReactLynx with a memory history. Tap → go to /about — this is a live in-page route transition (typed search params included), no native bridge involved.

      tanstack-routersrc/spike/index.tsx

      Multi-page app (MPA)

      The home bundle of the multi-page demo. Home ↔ Profile is an in-page transition (both live in this one bundle) and runs live in the preview. The Detail and Settings buttons open separate native pages — tapping them in the web preview is a no-op because that path needs the native container; scan the QR code to see the cross-page navigation and the path/search params crossing the JS-context boundary.

      tanstack-routersrc/routes/index.tsx

      How it's wired

      Browse the source in the embeds above. The key pieces:

      • src/routes/* — file-based routes (createFileRoute), plus a page export marking native-page boundaries (our MPA extension).
      • src/routeTree.gen.ts — generated by the official @tanstack/router-generator, running inside the Rspeedy build.
      • src/routes.manifest.ts + src/page-entries.gen.ts — generated by scripts/gen-mpa.mjs: the route→bundle mapping and one entry per native page.
      • src/mpa/create-router.tsx — wires createRouter to sparkling-navigation through the reusable sparkling-history shim (createMpaHistory + createSparklingHost).
      • src/shims/* — the four bundler-level shims that let TanStack Router run on ReactLynx (no react-dom, no DOM).