Belajar TanStack - Routing & Navigation

#Pendahuluan

Query dan Table mengelola data di dalam satu halaman. Tapi aplikasi nyata punya banyak halaman: dashboard, daftar pengguna, detail proyek. Di sinilah TanStack Router berperan — router type-safe yang menyusun seluruh aplikasi sebagai route tree dan memuat data sebelum komponen dirender.

Episode 7 membangun route tree pertama, nested routes dengan layout, data loading lewat loader, serta navigasi dengan Link dan state route. Ini adalah fondasi routing yang akan kita perkaya di episode 10.

Pada akhir episode, kalian akan punya aplikasi multi-halaman di mana URL, data, dan komponen tersinkron dengan aman oleh tipe.

#Membangun Route Tree

#createRootRoute dan createRoute

Seluruh aplikasi dimulai dari route akar. Route turunan di-definisikan dengan createRoute dan digabungkan lewat addChildren:

Route tree pertama

import { createRootRoute, createRoute, createRouter, RouterProvider } from "@tanstack/react-router"
 
const rootRoute = createRootRoute({
  component: () => <h1>Halo TanStack Router</h1>,
})
 
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/",
  component: () => <p>Halaman utama</p>,
})
 
const routeTree = rootRoute.addChildren([indexRoute])
const router = createRouter({ routeTree })

getParentRoute: () => rootRoute menempatkan indexRoute sebagai anak dari root. createRouter({ routeTree }) menghasilkan router siap pakai, lalu dirender lewat <RouterProvider router={router} />.

#Nested Routes dan Layout

#Layout Bersama dengan Outlet

Nested route memungkinkan layout berbagi. Route induk merender <Outlet />, dan route anak dirender di posisi tersebut:

Nested routes dengan layout

import { Outlet, Link } from "@tanstack/react-router"
 
const rootRoute = createRootRoute({
  component: () => (
    <>
      <nav>
        <Link to="/">Beranda</Link>
        <Link to="/pengguna">Pengguna</Link>
      </nav>
      <Outlet />
    </>
  ),
})
 
const penggunaRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "pengguna",
  component: PenggunaPage,
})

<Outlet /> menjadi tempat route anak dirender, sehingga layout nav dan header muncul di semua halaman tanpa duplikasi. <Link to="/pengguna"> adalah komponen navigasi TanStack Router yang otomatis menangani active state dan type-checking URL.

#Data Loading dengan Loaders

#Memuat Data Sebelum Render

Loader dijalankan sebelum komponen route dirender. Hasilnya dibaca komponen lewat useLoaderData:

Route dengan loader

import { useLoaderData } from "@tanstack/react-router"
 
const postRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "posts/$postId",
  loader: ({ params }) => ambilPosting(params.postId),
  component: () => {
    const data = useLoaderData({ from: postRoute.id })
    return <article>{data.judul}</article>
  },
})

path: "posts/$postId" menandai segmen dinamis; nilai aktualnya ada di params.postId saat loader dipanggil. useLoaderData({ from: postRoute.id }) mengambil data hasil loader dengan tipe yang disimpulkan dari route — ini jaminan type-safe yang tidak dimiliki router lain.

#Navigation Transitions dan Route State

#Mengontrol Perilaku Navigasi

TanStack Router menampilkan pending state selama loader berjalan dan menangani error secara terpisah:

Pending dan error component pada route

const postRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "posts/$postId",
  loader: ({ params }) => ambilPosting(params.postId),
  pendingComponent: () => <p>Memuat posting...</p>,
  errorComponent: ({ error }) => <p>Gagal: {error.message}</p>,
  component: PostComponent,
})

pendingComponent tampil selama loader belum selesai, dan errorComponent tampil saat loader melempar error. Keduanya membuat transisi navigasi terasa responsif tanpa logika loading manual di tiap halaman.

#Penutup

Episode 7 menutup routing dasar: route tree dengan createRootRoute dan createRoute, nested routes dengan Outlet untuk layout bersama, loader untuk memuat data sebelum render, serta komponen pending dan error untuk transisi navigasi.

Inti yang harus dibawa pulang:

• Route tree dibangun dengan createRootRoute dan addChildren.
• Outlet adalah tempat route anak dirender dalam layout induk.
• Loader memuat data sebelum komponen dirender.
• useLoaderData membaca hasil loader dengan tipe ter-infer.
• Segmen dinamis ditulis dengan prefix $ di path.
• pendingComponent dan errorComponent menangani transisi.

Di episode 8 selanjutnya kita akan membahas advanced query patterns — prefetching dan query cancellation, dependent queries dan parallel queries, query function dengan fetchers modern, serta sinkronisasi server state antar tab browser. Kembali ke TanStack Query, tapi di level yang jauh lebih dalam!