Navigation avec Expo Router

Qu’est-ce qu’Expo Router ?

Installation

# 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

Routes basées sur les fichiers

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)

Mise en page racine

// 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>
  );
}

Naviguer avec Link

import { Link } from 'expo-router';

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

Naviguer avec useRouter

import { useRouter } from 'expo-router';

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

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

Routes dynamiques

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

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

Navigation par onglets

// 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>
  );
}

Écrans modaux

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

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

Liens profonds

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

Modèle d’authentification

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

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

Vérification rapide

Récapitulatif