用途
sfnext-routing 技能用于在 Storefront Next 项目中实现基于文件的路由，基于 React Router 7 的框架模式与 flat-routes 文件约定。当需要添加新页面、创建布局路由、定义路由参数或处理数据加载与表单提交时，可使用该技能。
主要能力
路由文件约定
路由文件位于 src/routes/ 目录，文件名直接映射到 URL 路径，使用点号（.）作为嵌套分隔符。命名规则包括：
- 点号（.）创建路径段：_app.product.tsx 映射到 /product
- $ 前缀标记动态参数：$productId 变为 :productId
- _ 前缀标记布局路由（无路径段）：_app.tsx 包裹子路由但不添加 URL 段
- _index 精确匹配父路径（索引路由）
示例映射：
- _app.tsx — 布局路由（包裹子路由）
- _app._index.tsx — 首页（_app 布局的索引）
- _app.product.$productId.tsx — /product/:productId（动态参数）
- _app.category.$categoryId.tsx — /category/:categoryId（动态参数）
- _app.cart.tsx — /cart（静态路由）
- _app.account.tsx — /account（账户页面布局）
- _app.account.orders.tsx — /account/orders（嵌套在账户布局下）
路由模块导出
每个路由文件可导出以下内容：
- loader — 服务端数据加载，接收 params 与 context，可调用 createApiClients 获取数据
- action — 处理变更（表单提交），接收 request 与 context
- default — 页面组件，通过 props 接收 loaderData
页面组件中可使用 <SeoMeta /> 组件设置 SEO 元数据（而非 meta 导出）。数据流式加载可通过 Suspense 与 Await 实现。
布局路由
布局路由用共享 UI（导航、页脚等）包裹子路由，通过 <Outlet /> 渲染子路由内容。
资源路由
返回数据而无 UI 组件的路由，例如 resource.api.client.$resource.tsx，用于 useScapiFetcher 在服务端执行 SCAPI 调用。
使用方式
添加新页面时，在 src/routes/ 下创建路由文件（如 src/routes/_app.wishlist.tsx 对应 /wishlist），导出 loader 用于数据加载，导出 default 作为页面组件。组件内可使用 SeoMeta 设置标题，使用 Suspense 与 Await 处理异步数据。
适用场景
适用于 Storefront Next 项目中的页面路由管理，包括新增页面、布局嵌套、动态参数路由、服务端数据加载、表单变更处理以及服务端 API 资源路由。
限制
该技能仅覆盖 React Router 7 文件路由相关内容。具体 API 客户端实现、组件构建、Page Designer 路由等由相关技能（sfnext-data-fetching、sfnext-components、sfnext-page-designer）负责。