SuperAPI AI 工具集

gsap-react-router

前端与建站

查看项目

更新于 10-15 23:34

技能介绍

用途:在 React Router v7/v8 的 framework、data 或 declarative 模式下构建或审查动画,覆盖 GSAP 页面过渡、组件进出场、滚动效果与导航拦截。

主要能力:围绕 mount → initial state → intro → settled → outro → end state → unmount 生命周期组织动画;处理 useBlocker 出场、过渡感知链接、锁定与 pending 状态、前进后退、滚动与焦点、View Transitions;区分路由复用与重挂载、布局与 Outlet、SSR/SPA 首屏、流式渲染、fetcher、模态路由;支持 Lenis、ScrollSmoother 平滑滚动,以及幕布、首次访问预加载、共享元素变形等过渡原型。

使用方式:先读仓库说明、现有动画、布局、导航、CSS、无障碍约定与检查项;确认 React Router 7 及以上及模式(framework 有 react-router.config.ts、routes.ts、root.tsx、HydratedRouter;data 有 createBrowserRouter 与 RouterProvider;declarative 有 BrowserRouter)。从 node_modules/react-router/package.json 读取版本,优先参考包内 docs/、CHANGELOG.md 与 dist/ 的 .d.ts。GSAP 仅在浏览器运行,framework 模式需放在 useGSAP 或 effect 内,注册放 .client 副作用模块。

限制:React Router 无 leave 钩子,需用 blocker 或拦截导航;不得阻塞或对 POP 做出场;同一元素只用一种引擎;需保留原生链接行为与 reduced motion 的 settled 状态;版本 8 仅 ESM、需 React 19.2 且移除 react-router-dom。具体安装命令与更多细节资料未提供。