React Academy · 课时

使用 Expo Router 进行导航

Q: 「使用 Expo Router 进行导航」这节课中我会学到什么？

设置 Expo Router，实现基于文件的导航、类型化路由和深层链接。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

设置 Expo Router，实现基于文件的导航、类型化路由和深层链接。

使用 Expo Router 进行导航 是 CoddyKit 上的免费 React Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是 Expo Router？

Expo Router 是一个基于文件的 React Native 路由库（构建于 React Navigation 之上）。与 Next.js App Router 类似，文件结构会定义导航路由。

安装

创建一个预先配置好 Expo Router 的新 Expo 项目。

# Create new project:
npx create-expo-app@latest my-app --template tabs

# Or add to existing Expo project:
npx expo install expo-router react-native-safe-area-context react-native-screens

基于文件的路由

app/ 目录中的文件会自动成为路由。index.tsx 是根路由，[id].tsx 是动态片段。

app/
  _layout.tsx       # root layout (Stack navigator)
  index.tsx          # → / (home screen)
  profile.tsx        # → /profile
  posts/
    _layout.tsx      # posts stack layout
    index.tsx        # → /posts
    [id].tsx         # → /posts/123 (dynamic)

根布局

根 _layout.tsx 会使用提供者包装所有屏幕，并定义顶层导航器。

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="profile" options={{ title: 'Profile' }} />
    </Stack>
  );
}

使用 Link 导航

使用来自 expo-router 的 Link 组件进行声明式导航，类似于 next/link。

import { Link } from 'expo-router';

function HomeScreen() {
  return (
    <Link href="/profile">Go to Profile</Link>
  );
}

使用 useRouter 导航

使用 useRouter() 进行命令式导航，以编程方式执行 push、replace 或返回操作。

import { useRouter } from 'expo-router';

function LoginForm() {
  const router = useRouter();

  async function handleLogin() {
    await login();
    router.replace('/dashboard');
  }
}

动态路由

在动态路由文件中使用 useLocalSearchParams() 访问路由参数。

// app/posts/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function PostScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <PostDetail postId={id} />;
}

标签页导航

在分组布局中使用来自 expo-router 的 Tabs 实现底部标签页导航。

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ({ color }) => <HomeIcon color={color} /> }} />
      <Tabs.Screen name="explore" options={{ title: 'Explore' }} />
    </Tabs>
  );
}

模态屏幕

在 Stack.Screen 选项中设置 presentation: 'modal'，即可将屏幕以模态方式呈现。

// app/_layout.tsx
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Settings' }} />

// Navigate to modal:
router.push('/modal');

深层链接

Expo Router 会自动处理深层链接。在 app.json 中定义 URL 方案后，类似 myapp://posts/123 的链接就会打开正确的屏幕。

// app.json
{
  "expo": {
    "scheme": "myapp"
  }
}

身份验证模式

使用根布局，根据身份验证状态有条件地渲染身份验证屏幕或应用标签页。

// app/_layout.tsx
import { Redirect } from 'expo-router';

function RootLayout() {
  const { user } = useAuth();
  if (!user) return <Redirect href="/login" />;
  return <Stack />;
}

快速检查

哪个 Expo Router 钩子可以读取动态路由参数，例如 /posts/[id] 中的 id？

回顾

Expo Router 使用基于文件的路由：app/index.tsx → 首页，app/[id].tsx → 动态路由。在 _layout.tsx 中定义布局，使用 Link 或 useRouter() 进行导航，并使用 useLocalSearchParams() 读取参数。

常见问题解答

「使用 Expo Router 进行导航」课时是免费的吗？

是的 — 「使用 Expo Router 进行导航」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「使用 Expo Router 进行导航」这节课中我会学到什么？

设置 Expo Router，实现基于文件的导航、类型化路由和深层链接。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「使用 Expo Router 进行导航」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy