素材阁

Remix 速查

共 24 条 Remix 速查:命令与路由、数据加载、数据变更、导航与其它、配置与部署。 支持搜索与分类筛选,点击即可复制。

命令与路由

基于嵌套路由与 Web 标准。

命令说明
创建项目
开发 / 构建 / 启动
首页(routes 目录即路由)
动态参数($id)
索引路由与嵌套布局
在父路由渲染子路由

数据加载

loader 在服务端取数。

命令说明
定义 loader
在组件读取 loader 数据
返回类型
缓存与复用

数据变更

action 处理提交。

命令说明
定义 action
提交表单触发 action
读取 action 返回(校验错误等)
提交状态(做 loading)
在 action 中跳转

导航与其它

链接、导航与错误边界。

命令说明
客户端导航
编程式跳转
页面 meta
路由级错误边界
不导航的提交/加载(后台请求)

配置与部署

适配器与打包。

命令说明
配置文件
部署适配
构建产物
配置注入

使用说明

Remix 速查:命令与路由、数据加载、数据变更、导航与其它、配置与部署;支持搜索与分类筛选,点击即可复制。

  1. 按用途点分类:命令与路由、数据加载、数据变更、导航与其它、配置与部署。
  2. 点「命令」列复制到路由文件或终端。
  3. 读数据放 loader(服务端)、写数据放 action,用 Form 提交自动接到 action。
  4. 用 useNavigation 做 loading 状态,用 useFetcher 做不跳转的后台请求。

常见问题

loader 和 action 分别何时执行?
loader 在页面加载/导航时运行、返回值给组件;action 在表单提交(非 GET)时运行,之后通常 redirect 或返回错误。
为什么推荐 Form 而不是 fetch?
Form 天然支持无 JS 也能提交(渐进增强),且自动触发 action、处理重定向与校验错误。
需要联网吗?
速查内容本地可用;安装依赖需联网。

延伸阅读

相关工具