返回精选库
expo-router·开发与工程

用 expo-router 把页面、链接与返回行为理顺

本文目录

移动应用的导航不只是按钮跳转:详情页可能从列表进入,也可能由通知或外部链接直接打开。expo-router 把这些路径组织到文件路由中,帮助 Agent 同时考虑 URL、布局和返回栈,而不是把每个跳转写成孤立动作。

先把 Expo 知识接入 Agent

Codex 用户在终端运行下面的 Expo 官方插件命令,也可在 Codex 的 /plugins 中找到 Expo。Claude Code 用户改用 claude plugin install expo@claude-plugins-official。两种插件都会带入 Expo Skills 与 MCP 配置;其他支持 Agent Skills 的客户端可用 npx skills@latest add expo/skills --skill '*',按提示选择客户端并刷新会话。安装插件本身不会构建或发布应用。

命令
codex plugin add expo@openai-curated

打开已有 Expo 项目,直接说“使用 expo-router”,并给出当前 SDK、目标平台及相关文件。

先画清路由与文件的对应

以下是可按项目调整的首次输入:

提示词
使用 expo-router,在当前应用中增加商品列表、商品详情和设置入口。先列出路由文件与 URL 对照,保留现有首页;详情页接收商品 ID,既能从列表进入也能直接打开链接。确认 SDK 版本后实现,并说明返回、无效 ID 和首次打开深链接如何验证。

当前官方文档以 src/app 为路由目录;已有项目也可能使用 app。先确认项目实际结构,再决定在哪里新增页面。路由目录只放页面与特殊布局文件,普通组件、工具函数和 Hook 留在外部,否则可能被当成路由。

确保有匹配根路径的 index 页面。带括号的分组用于组织结构,不会作为 URL 的普通片段;动态参数则应在文件命名和页面读取中保持一致。先写一张短小的文件与路径对照,往往比直接生成一堆页面更容易发现冲突。例如项目使用 src/app 时,src/app/products/index.tsx 对应 /products,src/app/products/[id].tsx 对应 /products/42。在详情页用 useLocalSearchParams<{ id: string }>() 读取 id,让列表里的 Link 指向实际商品路径;无效 ID 也应有明确退路。已有项目若用 app,沿用它的目录,不为照抄示例另建一套。

布局承担共享结构

根 _layout 用于路由前的初始化与共享 Provider,局部布局则组织栈、标签或模态页面。让 Agent 沿用项目已有布局,而不是把每个页面重新套进一套导航容器。使用 Link 等导航元素时,也应保留正确的点击与平台行为。

原生标签、预览菜单和某些转场效果有系统版本条件。技能中的新写法不能直接套到所有旧 SDK;Expo Router Skill 1.0.1 明确要求 SDK 56+ 从 expo-router/react-navigation 而不是 @react-navigation/* 直接导入相关 API;旧 SDK 先查对应版本文档,不要跨版本照抄。不要为了增加一个详情页顺手替换整个导航架构。

把路由表写成验收表

实施前可列三列:路由文件、预期 URL、进入方式。商品详情页至少标出“从列表点入”和“外部链接冷启动”两行,并说明无效商品 ID 时的退路。页面改名时再列旧路径如何处理,避免留下两个入口指向内容不同的详情页。

实现后先用 Link 从列表进入,检查返回能否回到原筛选。要在已安装 development build 的目标平台验证冷启动深链接,先在 app.json 的 expo.scheme 设置实际应用 scheme;如果刚新增或更改 scheme,需要重新构建并安装 development build。下面假设 scheme 是 myapp,详情 ID 为 42;在项目终端按目标平台运行一条,并替换成你的 scheme 与路径:

命令
npx uri-scheme open myapp://products/42 --ios
# Android 设备或模拟器则改为 --android

关闭应用后重跑同一条命令,确认进入的是 ID 42 的详情页、登录或初始化没有抢先跳到错误页面,返回路径也合理。若冷启动进入了详情页却没有可返回的父页面,检查所在布局是否需要把稳定的 index 设为 anchor;不要只在列表点击路径上验证返回。Expo Go 使用 exp://…/--/products/42 形式,不能拿它代替已安装开发版的自定义 scheme 检查。Web 端刷新 /products/42 是第三种独立检查。若旧 SDK 没有所用的原生标签或转场 API,先保持现有导航可用,再按版本文档决定是否升级,不能为了套示例引入不兼容依赖。

深链接失败先定位哪一层断了

外部链接打不开详情时,依次检查 URL 是否匹配文件路径、动态参数是否读到、认证或初始化是否提前跳转,以及目标页面能否处理找不到的数据。不要马上重写导航容器。对于被分享出去的旧链接,页面迁移时要考虑重定向或兼容入口;只删旧文件可能让已有分享失效。把这些结果记录在路由表旁,之后新增详情页就能照同一套入口检查。

动态详情页一定要测试“返回”

有开发者复现:嵌套 Stack 只声明 [userId] 这一个初始路由时,进入 /users/1 看起来正常,但返回会落在参数为空的同名页面。若你的路由结构相似,别只验证详情页能打开;从父列表进入后再按系统返回、router.back() 和深链接分别测试。遇到空参数页面时,检查 Stack 的初始路由与静态入口设计,再决定是否调整路由层级。

你的首次任务进行得怎么样?

选择项通过网站统计帮助我们了解常见卡点。屏蔽统计可能导致无法送达;具体问题请通过邮件反馈。

参考来源

  1. expo-router — official skillexpo
  2. expo/skills — READMEexpo
  3. Core concepts of file-based routing in Expo RouterExpo
  4. Expo Router Skill — Route StructureExpo
  5. Linking into your appExpo
  6. Navigating between pages in Expo RouterExpo
  7. expo-router: Stack with a single dynamic route ([param]) as its initial screen renders an empty param-less instance as the anchorElalfy74
发现过期或有误的信息?告诉我们

继续发现

其他值得了解的技能。