Code Reference

Router

Expo · Reference cheat sheet

Router

Expo · Reference cheat sheet


📋 Overview

Expo Router is a file-based router built on React Navigation. Files under app/ become routes; layouts wrap segments; deep links match paths. Use typed routes and Link / router for navigation.

🔧 Core concepts

PieceRole
app/_layout.tsxRoot layout
app/index.tsx/
app/[id].tsxDynamic segment
(groups)Organizational, no URL segment
Link / router.pushNavigation
Stack / TabsNavigators in layouts
+not-found404

Enable plugin "expo-router" in app config; entry via expo-router/entry.

💡 Examples

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

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Home" }} />
      <Stack.Screen name="post/[id]" options={{ title: "Post" }} />
    </Stack>
  );
}
// app/index.tsx
import { Link } from "expo-router";
import { Text, View } from "react-native";

export default function Home() {
  return (
    <View>
      <Link href="/post/42">Open post</Link>
    </View>
  );
}
// app/post/[id].tsx
import { useLocalSearchParams, router } from "expo-router";
import { Pressable, Text } from "react-native";

export default function Post() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return (
    <>
      <Text>Post {id}</Text>
      <Pressable onPress={() => router.back()}>
        <Text>Back</Text>
      </Pressable>
    </>
  );
}

⚠️ Pitfalls

  • Mixing React Navigation containers manually with Expo Router.
  • Wrong folder names → unexpected URLs.
  • Forgetting scheme in config for deep links.
  • Heavy work in root layout blocking all screens.

On this page