0Pricing
React Academy · Lezione

Navigazione con Expo Router

Configuri Expo Router per la navigazione basata sui file, con route tipizzate e deep linking.

Navigazione con Expo Router è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Che cos'è Expo Router?

Expo Router è una libreria di routing basata sui file per React Native, realizzata sopra React Navigation. Come l'App Router di Next.js, la struttura dei file definisce le route di navigazione.

Installazione

Crei un nuovo progetto Expo con Expo Router già configurato.

# 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

Route basate sui file

I file nella directory app/ diventano automaticamente delle route. index.tsx è la route principale, mentre [id].tsx è un segmento dinamico.

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 principale

Il file principale _layout.tsx racchiude tutte le schermate con i provider e definisce il navigator di livello superiore.

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

Navigazione con Link

Utilizzi il componente Link di expo-router per una navigazione dichiarativa, simile a next/link.

import { Link } from 'expo-router';

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

Navigazione con useRouter

Utilizzi useRouter() per la navigazione imperativa: esegua il push, sostituisca la route o torni indietro a livello programmatico.

import { useRouter } from 'expo-router';

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

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

Route dinamiche

Acceda ai parametri della route con useLocalSearchParams() in un file di route dinamica.

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

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

Navigazione a schede

Utilizzi Tabs di expo-router all'interno di un layout di gruppo per la navigazione con schede nella parte inferiore.

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

Schermate modali

Presenti una schermata come modale impostando presentation: 'modal' nelle opzioni di Stack.Screen.

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

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

Deep linking

Expo Router gestisce automaticamente i deep link. Definisca lo schema URL in app.json e collegamenti come myapp://posts/123 apriranno la schermata corretta.

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

Schema di autenticazione

Utilizzi un layout principale che esegue il rendering condizionale delle schermate di autenticazione o delle schede dell'app in base allo stato di autenticazione.

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

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

Verifica rapida

Quale hook di Expo Router legge i parametri dinamici della route, come id in /posts/[id]?

Riepilogo

Expo Router utilizza il routing basato sui file: app/index.tsx → home, app/[id].tsx → route dinamica. Definisca i layout in _layout.tsx, navighi con Link o useRouter() e legga i parametri con useLocalSearchParams().

Domande Frequenti

La lezione «Navigazione con Expo Router» è gratuita?

Sì — il testo completo di «Navigazione con Expo Router» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Navigazione con Expo Router»?

Configuri Expo Router per la navigazione basata sui file, con route tipizzate e deep linking. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Navigazione con Expo Router»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Componenti core di React Native e DOM web a confronto
  2. Styling con API StyleSheet e Flexbox
  3. Navigazione con Expo Router
  4. Accesso alle API del dispositivo: fotocamera, posizione e notifiche push
← Torna a React Academy