# 世博路由器 ## 概述使用 Expo Router 6.x 的 React Native 的基于文件的路由。将“app/”目录中的文件系统结构映射到导航屏幕。支持堆栈和选项卡导航器、路由组、动态参数和嵌套布局。 **安装**：包含在 Expo SDK 54+ 中。确保“expo-router”处于依赖关系中。 ## 工作流程 **设置路由：** 1. 创建 `app/_layout.tsx` 作为根布局（providers、全局 chrome） 2.创建路由组目录：`app/(demo)/`、`app/(auth)/` 3. 在每个组中添加`_layout.tsx`以进行特定于组的导航 4. 为默认屏幕添加 `index.tsx` 5.为动态路由添加 `[param].tsx` 6. 添加 `+not-found.tsx` 用于 404 处理 **添加新屏幕：** 1. 在适当的路由组中创建文件 2.导出默认React组件 3. 在父 `_layout.tsx` 中或通过 `` 配置屏幕选项 4. 使用 `useRouter()` 或 `` 进行导航 ## 指导 ### 文件约定文件 |目的 ---|--- `_layout.tsx` |目录的布局包装器（提供者、导航器） `index.tsx` |目录的默认屏幕 `[参数].tsx` |动态路段 `[...catchAll].tsx` |包罗万象的路线 `+not-found.tsx` | 404屏 `（组）/` |路由组（无 URL 段） ### 根布局模式根“_layout.tsx”是入口点。将其用于全球提供商： app/_layout.tsx → GestureHandlerRootView > SafeAreaProvider > 上下文 > 堆栈保持根布局精简——将镶边（选项卡、标题）推入组布局中。 ### 路线组路由组 `(name)/` 组织屏幕而不影响 URL 路径。常见模式：应用程序/ ├── _layout.tsx # 根：providers + Stack ├──（演示）/ │ ├── _layout.tsx # 用于演示场景的选项卡或堆栈 │ ├── index.tsx # 主屏幕 │ └── [id].tsx # 详细信息屏幕 └── +未找到.tsx ### 导航 * **程序化** : `const router = useRouter()` → `router.push('/detail/123')`, `router.back()` * **声明性**：`` 组件 * **Params** : `const { id } = useLocalSearchParams<{ id: string }>()` * **Redirect** : `` 用于条件路由 ### 屏幕选项通过布局或内联配置屏幕呈现： * 在布局中： `` * 内联：`` * 常用选项：`title`、`headerShown`、`presentation` ('card' | 'modal')、`animation` ### 布局嵌套将提供者嵌套在 root 中，chrome 中的组中： * 根`_layout.tsx`：`GestureHandlerRootView`、`SafeAreaProvider`、主题上下文、`` * 将 `_layout.tsx` 分组：`` 或 `` 以及屏幕选项、标题配置 ## 最佳实践 * 保持路由文件精简——委托查看`/components/views/`中的组件 * 使用路由组来分隔关注点而不影响 URL * 使用泛型输入路由参数： `useLocalSearchParams<{ id: string }>()` * 提供自定义标头时设置 `headerShown: false` * 使用 `` 实现一致的过渡 * 将共享提供程序（主题、数据上下文）放置在根 `_layout.tsx` 中 * 使用 `+not-found.tsx` 进行优雅的 404 处理 ## 反模式 * 将业务逻辑放在路由文件中（保持精简，委托给组件） * 深度嵌套超过2层的路由组 * 直接使用React Navigation代替Expo Router抽象 * 将导航路径硬编码为字符串，无需复杂应用程序的常量文件 * 忘记从路由文件中导出默认值（导致黑屏） * 当提供者应该位于根布局中时，将其放入组布局中

世博路由器

包含技能