React Native Expo Routerの導入から実践まで｜ファイルベースルーティング完全ガイド

app/
├── _layout.tsx       # ルートレイアウト
├── index.tsx         # / （ホーム画面）
├── about.tsx         # /about
├── settings/
│   ├── _layout.tsx   # settings配下のレイアウト
│   ├── index.tsx     # /settings
│   └── profile.tsx   # /settings/profile
└── users/
    └── [id].tsx      # /users/:id （動的ルート）

npx create-expo-app@latest my-app
cd my-app
npx expo start

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

{
  "expo": {
    "scheme": "myapp",
    "plugins": ["expo-router"]
  }
}

{
  "main": "expo-router/entry"
}

app/
├── _layout.tsx
├── (tabs)/
│   ├── _layout.tsx      # Tabs定義
│   ├── index.tsx         # / （タブ1）
│   └── explore.tsx       # /explore （タブ2）
├── (auth)/
│   ├── _layout.tsx       # 認証画面用レイアウト
│   ├── login.tsx         # /login
│   └── register.tsx      # /register
└── +not-found.tsx        # 404画面

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

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "ホーム" }} />
      <Stack.Screen name="detail" options={{ title: "詳細" }} />
    </Stack>
  );
}

<Stack.Screen
  name="detail"
  options={{
    title: "詳細画面",
    headerStyle: { backgroundColor: "#6200ee" },
    headerTintColor: "#fff",
    headerTitleStyle: { fontWeight: "bold" },
  }}
/>

import { Link, useRouter } from "expo-router";
import { View, Text, Pressable } from "react-native";

export default function HomeScreen() {
  const router = useRouter();

  return (
    <View>
      {/* 宣言的な遷移 */}
      <Link href="/detail">
        <Text>詳細へ</Text>
      </Link>

      {/* 命令的な遷移 */}
      <Pressable onPress={() => router.push("/detail")}>
        <Text>詳細へ移動</Text>
      </Pressable>
    </View>
  );
}

// app/(tabs)/_layout.tsx
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "#6200ee",
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "ホーム",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          title: "検索",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="search" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "プロフィール",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

<Tabs.Screen
  name="modal"
  options={{
    tabBarStyle: { display: "none" },
    tabBarButton: () => null, // タブバーからボタンも非表示
  }}
/>

app/
├── _layout.tsx           # ルート Stack
├── (tabs)/
│   ├── _layout.tsx       # Tabs定義
│   ├── home/
│   │   ├── _layout.tsx   # Home内のStack
│   │   ├── index.tsx     # /home
│   │   └── [id].tsx      # /home/:id
│   └── settings/
│       ├── _layout.tsx   # Settings内のStack
│       ├── index.tsx     # /settings
│       └── edit.tsx      # /settings/edit
└── modal.tsx             # モーダル画面

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

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="(tabs)" />
      <Stack.Screen
        name="modal"
        options={{ presentation: "modal" }}
      />
    </Stack>
  );
}

// app/(tabs)/home/_layout.tsx
import { Stack } from "expo-router";

export default function HomeLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "ホーム" }} />
      <Stack.Screen name="[id]" options={{ title: "アイテム詳細" }} />
    </Stack>
  );
}

import { useRouter } from "expo-router";

export default function MyScreen() {
  const router = useRouter();

  const navigateToDetail = (itemId: string) => {
    router.push(`/items/${itemId}`);
  };

  const goBack = () => {
    router.back();
  };

  const replaceScreen = () => {
    router.replace("/login");
  };

  // ...
}

// app/users/[id].tsx
import { useLocalSearchParams } from "expo-router";
import { View, Text } from "react-native";

export default function UserDetail() {
  const { id } = useLocalSearchParams<{ id: string }>();

  return (
    <View>
      <Text>ユーザーID: {id}</Text>
    </View>
  );
}

import { useGlobalSearchParams } from "expo-router";

export default function Header() {
  const params = useGlobalSearchParams();
  // URL全体のパラメータにアクセス
}

import { usePathname, useSegments } from "expo-router";

export default function DebugInfo() {
  const pathname = usePathname();   // 例: "/users/123"
  const segments = useSegments();   // 例: ["users", "123"]

  // 認証状態に応じたリダイレクトに活用
}

import { useFocusEffect } from "expo-router";
import { useCallback } from "react";

export default function FeedScreen() {
  useFocusEffect(
    useCallback(() => {
      // 画面表示時にデータ取得
      fetchLatestPosts();

      return () => {
        // 画面離脱時のクリーンアップ
      };
    }, [])
  );
}

app/
└── posts/
    └── [slug].tsx    # /posts/hello-world → slug = "hello-world"

app/
└── docs/
    └── [...path].tsx  # /docs/a/b/c → path = ["a", "b", "c"]

// app/docs/[...path].tsx
import { useLocalSearchParams } from "expo-router";

export default function DocPage() {
  const { path } = useLocalSearchParams<{ path: string[] }>();
  // path は配列として取得される
}

{
  "expo": {
    "experiments": {
      "typedRoutes": true
    }
  }
}

import { Link, useRouter } from "expo-router";

// 存在しないルートを指定するとTypeScriptエラーになる
<Link href="/users/123">ユーザー詳細</Link>  // OK
<Link href="/nonexistent">存在しない</Link>    // 型エラー

const router = useRouter();
router.push("/settings");    // OK
router.push("/unknown");     // 型エラー

{
  "expo": {
    "scheme": "myapp"
  }
}

{
  "expo": {
    "ios": {
      "associatedDomains": ["applinks:example.com"]
    },
    "android": {
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            { "scheme": "https", "host": "example.com", "pathPrefix": "/" }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

// 最小限の_layout.tsx
import { Slot } from "expo-router";

export default function Layout() {
  return <Slot />;
}

const { id } = useLocalSearchParams<{ id: string }>();
const numericId = Number(id); // 明示的に変換