対象読者
- モバイルアプリを作ってみたいReactエンジニア
- モバイルアプリのリリース作業を手軽に行いたい方
前提環境
筆者の検証環境は以下の通りです。
- macOS Sequoia 15.5
- Node.js 24.4.1
- npm 11.4.2
- Expo 53.0.20
- React Native 0.79.5
プログラムによるナビゲーション
今回はExpo Routerの応用的な機能について解説していきます。
Linkコンポーネントによる宣言的な画面遷移に加え、Expo RouterではuseRouterフックを用いることで、ボタンのタップやフォーム送信といったイベントに応じた手続き的なナビゲーションを実装できます。
useRouterフックの基本
useRouterフックは、プログラムによる画面遷移を行うためのメソッドを提供します。特に使用するメソッドは次の3つです。
-
router.push(href)：新しい画面をスタックに追加します。router.push('/settings')のように使用します。 -
router.replace(href)：現在の画面を新しい画面に置き換えます。ログイン後のリダイレクトのように、履歴を残したくない場合に使います。 -
router.back()： スタック内の前の画面に戻ります。
router.pushで新しい画面をスタックに追加し、router.backで前の画面に戻れます（リスト1）。
［リスト1］app/(tabs)/home.tsx
import { useRouter } from 'expo-router';
import { View, Button } from 'react-native';
export default function HomePage() {
const router = useRouter();
return (
<View style={{ padding: 20 }}>
<Button
title="プロフィール表示 (push)"
onPress={() => router.push('/users/123')}
/>
<Button
title="戻る (back)"
onPress={() => router.back()}
/>
</View>
);
}
また、リスト2はフォーム送信のような非同期処理の完了後に画面遷移を行う実例です。
［リスト2］app/settings/profile.tsx
import React, { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';
import { useRouter } from 'expo-router';
export default function ProfileEdit() {
const [name, setName] = useState('');
const router = useRouter();
const handleSave = async () => {
// APIでプロフィール更新（仮想）
const isSuccess = true; // 本来はAPIレスポンスで判断
if (isSuccess) {
Alert.alert('成功', 'プロフィールを更新しました', [
{ text: 'OK', onPress: () => router.back() },
]);
} else {
Alert.alert('エラー', '更新に失敗しました');
}
};
return (
<View style={{ padding: 20 }}>
<TextInput placeholder="名前" value={name} onChangeText={setName} />
<Button title="保存" onPress={handleSave} />
<Button title="キャンセル" onPress={() => router.back()} color="#999" />
</View>
);
}
useRouterフックにより、宣言的なLinkコンポーネントと手続き的なナビゲーションを適切に使い分け、洗練されたUIを構築できます。
