TanStack Router

TanStack Router —— 一个完全类型安全的 Web 路由器 —— 被移植到 Sparkling 之上,用于驱动原生多页导航。每个页面都是拥有独立 JS 上下文的 LynxView;页面间跳转是一次原生容器 open,通过生成的 file-based 路由清单 连接起来。

完整的设计、功能支持矩阵,以及与 TanStack 官方 React Native 方案的对比,见 TanStack Router 指南。以下示例来自 tanstack-router-demo 包。

Web 预览 vs. 真机

Web 预览会在浏览器中实时运行路由器。页内导航(同一个 bundle 内的路由) 使用 TanStack Router 的内存 history,所以在这里就能直接跑。跨页导航会通过 Sparkling 桥打开一个新的原生页面,只能在 Sparkling 容器内运行 —— 请使用 二维码标签页在真机上体验。

ReactLynx 上的路由器(单页)

可行性验证:TanStack Router 基于内存 history 运行在 ReactLynx 上。点击 → go to /about —— 这是一次实时的页内路由切换(含类型化 search 参数),不涉及 任何原生桥。

多页应用(MPA)

多页 demo 的 home bundle。Home ↔ Profile 是一次页内切换(二者同属这一个 bundle),在预览里能实时运行。而 DetailSettings 按钮会打开独立的原生 页面 —— 在 Web 预览里点击它们是无操作的,因为该路径需要原生容器;扫描二维码即可 看到跨页导航,以及 path/search 参数跨越 JS 上下文边界的过程。

实现方式

在上面的嵌入组件中浏览源码。关键部分:

  • src/routes/* —— file-based 路由(createFileRoute),外加一个标记原生 页面边界的 page 导出(我们对约定的扩展)。
  • src/routeTree.gen.ts —— 由官方 @tanstack/router-generator 在 Rspeedy 构建过程中生成。
  • src/routes.manifest.ts + src/page-entries.gen.ts —— 由 scripts/gen-mpa.mjs 生成:路由→bundle 映射,以及每个原生页面一个入口。
  • src/mpa/create-router.tsx —— 通过可复用的 sparkling-history shim(createMpaHistory + createSparklingHost)把 createRouter 接到 sparkling-navigation
  • src/shims/* —— 让 TanStack Router 能跑在 ReactLynx(无 react-dom、无 DOM)上的四个 bundler 层 shim。