Navigasi Antar Layar dengan Expo Router

Expo Router menghadirkan paradigma navigasi berbasis sistem berkas (file-based routing) yang terinspirasi dari arsitektur framework web modern ke dunia mobile. Kamu tidak perlu lagi mendaftarkan nama rute satu demi satu secara manual di berkas konfigurasi terpusat. Setiap berkas kode layar yang kamu letakkan di dalam direktori app/ otomatis dipetakan menjadi alamat rute navigasi aplikasi.

Aturan struktur berkas pada Expo Router terdiri atas:

• app/index.tsx: Menjadi layar utama saat aplikasi pertama kali dibuka (rute '/').
• app/_layout.tsx: Menentukan cetak biru tata letak pembungkus navigasi (misalnya Stack atau Tabs) yang berlaku bagi semua rute di tingkatan folder tersebut.
• Folder berpenamaan tanda kurung seperti app/(tabs)/: Digunakan untuk mengelompokkan modul rute secara logis tanpa memengaruhi penamaan URL segmen jalur aplikasi.
• Berkas berpenamaan tanda kurung siku seperti app/produk/[id].tsx: Berfungsi sebagai rute dinamis yang menangkap parameter segmen jalur navigasi.

Perpindahan antar layar dapat dilakukan secara deklaratif menggunakan komponen <Link href="/produk/10"> atau secara imperatif melalui hook useRouter():

import { useRouter } from 'expo-router';
import { Pressable, Text } from 'react-native';

export default function TombolBuka() {
  const router = useRouter();
  
  return (
    <Pressable onPress={() => router.push('/produk/10')}>
      <Text>Buka Detail</Text>
    </Pressable>
  );
}

Untuk membaca nilai parameter dinamis pada layar target [id].tsx, gunakan hook useLocalSearchParams(). Expo Router juga mendukung tiga pola navigasi seluler utama: Stack (tumpukan kartu riwayat dengan tombol kembali otomatis), Tabs (bilah tab navigasi di bagian bawah layar), dan Drawer (menu laci geser dari sisi kiri antarmuka).