React Router Data Mode: Bagian 1 – Instalasi dan Rute Awal

React Router adalah library routing yang sangat populer untuk aplikasi React. Di versi 6.4, React Router memperkenalkan “Data Mode,” sebuah paradigma baru yang bertujuan untuk menyederhanakan pengambilan dan pengelolaan data dalam komponen-komponen rute Anda. Mode data ini memungkinkan Anda untuk mendeklarasikan apa yang dibutuhkan setiap rute untuk dirender, dan React Router akan menangani pengambilan data yang diperlukan sebelum komponen tersebut ditampilkan. Ini menghasilkan kode yang lebih bersih, performa yang lebih baik, dan pengalaman pengguna yang lebih baik. Artikel ini adalah bagian pertama dari seri yang akan membahas Data Mode secara mendalam. Dalam bagian ini, kita akan membahas instalasi React Router v6.4+ dan membuat rute awal menggunakan Data Mode.

Daftar Isi

1. Pendahuluan
2. Prasyarat
3. Instalasi React Router v6.4+
4. Konfigurasi Router dengan createBrowserRouter
5. Membuat Komponen Rute Awal
6. Mendefinisikan Rute dengan path dan element
7. Menambahkan Link dengan <Link>
8. Pengantar loader: Mengambil Data dalam Rute
9. Contoh Sederhana: Mengambil Data Statis
10. Mengakses Data dengan useLoaderData
11. Penanganan Error: Komponen ErrorBoundary
12. Konsep Dasar Selesai!
13. Kesimpulan

Pendahuluan

Sebelum Data Mode, pengambilan data dalam aplikasi React sering kali melibatkan penggunaan useEffect di dalam komponen untuk memicu permintaan API. Pendekatan ini, meskipun berfungsi, dapat menyebabkan beberapa masalah:

• Fetching data yang kompleks: Logika fetching data tersebar di seluruh komponen, sehingga sulit untuk dipelihara dan di-debug.
• Waterfall: Komponen menunggu data dimuat sebelum dirender, menyebabkan pengalaman pengguna yang kurang optimal.
• Komponen terikat dengan data: Komponen secara langsung terikat dengan sumber data, sehingga sulit untuk diuji dan digunakan kembali.

Data Mode mengatasi masalah ini dengan menyediakan cara yang terpusat dan deklaratif untuk mengelola pengambilan data. Dengan memindahkan logika pengambilan data ke dalam fungsi loader yang terkait dengan rute, kita dapat:

• Memisahkan logika pengambilan data dari komponen UI: Komponen hanya bertanggung jawab untuk merender data yang telah diambil.
• Mengoptimalkan performa: React Router dapat secara paralel mengambil data untuk beberapa rute, mengurangi waktu pemuatan.
• Meningkatkan testabilitas: Fungsi loader mudah diuji secara terpisah dari komponen UI.

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

• Node.js dan npm (atau yarn) terinstal: Anda akan memerlukan Node.js dan npm (atau yarn) untuk mengelola dependensi proyek Anda.
• React terinstal: Jika Anda belum memiliki proyek React yang ada, Anda dapat membuatnya dengan Create React App: npx create-react-app my-app
• Pemahaman dasar tentang React: Pemahaman tentang komponen, props, state, dan JSX penting untuk mengikuti tutorial ini.

Instalasi React Router v6.4+

Langkah pertama adalah menginstal React Router v6.4 atau versi yang lebih baru. Buka terminal Anda dan arahkan ke direktori proyek React Anda. Kemudian, jalankan perintah berikut:

npm install react-router-dom@6.4
  # Atau jika Anda menggunakan yarn:
  yarn add react-router-dom@6.4
  

Perintah ini akan menginstal react-router-dom dan menambahkan dependensi yang diperlukan ke proyek Anda. Pastikan versinya adalah 6.4 atau lebih tinggi untuk mendapatkan akses ke fitur Data Mode.

Konfigurasi Router dengan createBrowserRouter

Setelah menginstal React Router, kita perlu mengkonfigurasi router. Dalam Data Mode, cara yang direkomendasikan adalah menggunakan createBrowserRouter. Ini adalah fungsi yang membuat instance router berdasarkan array objek rute.

Buat file baru bernama App.js (atau modifikasi yang sudah ada) dan tambahkan kode berikut:

  import React from 'react';
  import {
    createBrowserRouter,
    RouterProvider,
  } from "react-router-dom";

  const router = createBrowserRouter([
    {
      path: "/",
      element: <div>Halaman Beranda</div>,
    },
    {
      path: "/about",
      element: <div>Tentang Kami</div>,
    },
  ]);

  function App() {
    return (
      <RouterProvider router={router} />
    );
  }

  export default App;
  

Penjelasan kode:

• import { createBrowserRouter, RouterProvider } from "react-router-dom";: Mengimpor fungsi dan komponen yang diperlukan dari react-router-dom.
• createBrowserRouter([...]): Membuat instance router baru. Array yang diteruskan ke fungsi ini mendefinisikan rute-rute aplikasi Anda.
• path: Menentukan jalur URL yang sesuai dengan rute.
• element: Menentukan komponen React yang akan dirender ketika rute cocok. Dalam contoh ini, kita menggunakan elemen div sederhana.
• <RouterProvider router={router} />: Menyediakan instance router ke seluruh aplikasi Anda. Ini membuat rute yang Anda definisikan dapat diakses di seluruh aplikasi.

Selanjutnya, pastikan App.js dirender di index.js:

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

Sekarang, jalankan aplikasi Anda (npm start atau yarn start) dan arahkan ke http://localhost:3000/ dan http://localhost:3000/about. Anda akan melihat konten yang sesuai ditampilkan untuk setiap rute.

Membuat Komponen Rute Awal

Alih-alih menggunakan div sederhana, mari kita buat komponen React terpisah untuk setiap rute. Buat dua file baru: Home.js dan About.js.

Home.js:

  import React from 'react';

  function Home() {
    return (
      <div>
        <h1>Selamat Datang di Halaman Beranda!</h1>
        <p>Ini adalah halaman beranda aplikasi kami.</p>
      </div>
    );
  }

  export default Home;
  

About.js:

  import React from 'react';

  function About() {
    return (
      <div>
        <h1>Tentang Kami</h1>
        <p>Pelajari lebih lanjut tentang perusahaan kami.</p>
      </div>
    );
  }

  export default About;
  

Sekarang, impor komponen-komponen ini di App.js dan gunakan sebagai element untuk rute yang sesuai:

  import React from 'react';
  import {
    createBrowserRouter,
    RouterProvider,
  } from "react-router-dom";
  import Home from './Home';
  import About from './About';

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/about",
      element: <About />,
    },
  ]);

  function App() {
    return (
      <RouterProvider router={router} />
    );
  }

  export default App;
  

Simpan perubahan dan refresh browser Anda. Anda sekarang akan melihat komponen Home dan About dirender dengan benar berdasarkan URL.

Mendefinisikan Rute dengan path dan element

Seperti yang kita lihat, path dan element adalah properti kunci untuk mendefinisikan rute dalam React Router. Mari kita bahas properti-properti ini lebih detail:

• path: Menentukan pola URL yang cocok dengan rute. Ini bisa berupa:
  • Jalur statis: Seperti /, /about, atau /contact.
  • Parameter: Menggunakan : untuk menunjukkan parameter dinamis dalam URL. Misalnya, /users/:userId akan mencocokkan URL seperti /users/123, di mana 123 akan menjadi nilai parameter userId.
  • Wildcard: Menggunakan * untuk mencocokkan segmen URL apa pun. Misalnya, /files/* akan mencocokkan semua URL yang dimulai dengan /files/.
• element: Menentukan komponen React yang akan dirender ketika rute cocok. Ini bisa berupa:
  • Komponen fungsi: Seperti yang kita gunakan dalam contoh sebelumnya (<Home />, <About />).
  • Komponen kelas: Meskipun komponen fungsi lebih umum digunakan saat ini, Anda masih dapat menggunakan komponen kelas.
  • Elemen JSX langsung: Seperti yang kita lakukan di awal dengan <div>Halaman Beranda</div> (meskipun ini kurang direkomendasikan untuk aplikasi yang lebih kompleks).

Mari kita tambahkan rute dengan parameter ke App.js:

  import React from 'react';
  import {
    createBrowserRouter,
    RouterProvider,
  } from "react-router-dom";
  import Home from './Home';
  import About from './About';
  import User from './User'; // Kita akan membuat komponen ini nanti

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/about",
      element: <About />,
    },
    {
      path: "/users/:userId",
      element: <User />,
    },
  ]);

  function App() {
    return (
      <RouterProvider router={router} />
    );
  }

  export default App;
  

Sekarang, buat file baru bernama User.js:

  import React from 'react';
  import { useParams } from 'react-router-dom';

  function User() {
    const { userId } = useParams();

    return (
      <div>
        <h1>Profil Pengguna</h1>
        <p>ID Pengguna: {userId}</p>
      </div>
    );
  }

  export default User;
  

Penjelasan kode:

• import { useParams } from 'react-router-dom';: Mengimpor hook useParams dari react-router-dom.
• const { userId } = useParams();: Menggunakan hook useParams untuk mendapatkan nilai parameter userId dari URL.
• <p>ID Pengguna: {userId}</p>: Menampilkan nilai parameter userId di dalam komponen.

Sekarang, jika Anda membuka http://localhost:3000/users/123, Anda akan melihat komponen User ditampilkan dengan ID pengguna yang benar (123).

Menambahkan Link dengan <Link>

Untuk berpindah antar rute, kita dapat menggunakan komponen <Link> yang disediakan oleh React Router. Komponen ini merender tautan HTML biasa, tetapi mencegah perilaku default browser untuk memuat ulang halaman. Sebagai gantinya, <Link> menggunakan JavaScript untuk memperbarui URL dan merender komponen yang sesuai.

Mari kita tambahkan link ke Home.js dan About.js:

Home.js:

  import React from 'react';
  import { Link } from 'react-router-dom';

  function Home() {
    return (
      <div>
        <h1>Selamat Datang di Halaman Beranda!</h1>
        <p>Ini adalah halaman beranda aplikasi kami.</p>
        <Link to="/about">Pergi ke Halaman Tentang Kami</Link>
      </div>
    );
  }

  export default Home;
  

About.js:

  import React from 'react';
  import { Link } from 'react-router-dom';

  function About() {
    return (
      <div>
        <h1>Tentang Kami</h1>
        <p>Pelajari lebih lanjut tentang perusahaan kami.</p>
        <Link to="/">Kembali ke Halaman Beranda</Link>
      </div>
    );
  }

  export default About;
  

Penjelasan kode:

• import { Link } from 'react-router-dom';: Mengimpor komponen <Link> dari react-router-dom.
• <Link to="/about">Pergi ke Halaman Tentang Kami</Link>: Membuat link yang mengarah ke rute /about.
• <Link to="/">Kembali ke Halaman Beranda</Link>: Membuat link yang mengarah ke rute /.

Sekarang, refresh browser Anda. Anda akan melihat link di setiap halaman yang memungkinkan Anda berpindah antar rute tanpa memuat ulang halaman.

Pengantar loader: Mengambil Data dalam Rute

Sekarang kita telah mengkonfigurasi rute dasar, mari kita mulai menjelajahi Data Mode. Fitur inti Data Mode adalah fungsi loader. Fungsi loader adalah fungsi asinkron yang didefinisikan dalam konfigurasi rute. Fungsi ini bertanggung jawab untuk mengambil data yang dibutuhkan komponen rute sebelum dirender.

Keuntungan utama menggunakan loader adalah:

• Deklaratif: Anda secara eksplisit mendeklarasikan data apa yang dibutuhkan setiap rute.
• Terpusat: Logika pengambilan data terpusat di dalam fungsi loader.
• Performa: React Router dapat mengoptimalkan pengambilan data, misalnya dengan mengambil data untuk beberapa rute secara paralel.
• Penanganan Error: React Router menyediakan cara mudah untuk menangani error yang terjadi selama pengambilan data.

Fungsi loader menerima objek request sebagai argumen. Objek ini berisi informasi tentang permintaan saat ini, seperti URL dan parameter. Fungsi loader harus mengembalikan data yang akan tersedia untuk komponen rute.

Contoh Sederhana: Mengambil Data Statis

Mari kita mulai dengan contoh sederhana di mana kita mengambil data statis dalam fungsi loader. Kita akan memodifikasi rute /about untuk menggunakan loader.

Pertama, modifikasi konfigurasi rute /about di App.js:

  import React from 'react';
  import {
    createBrowserRouter,
    RouterProvider,
  } from "react-router-dom";
  import Home from './Home';
  import About from './About';
  import User from './User';

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/about",
      element: <About />,
      loader: () => {
        return {
          companyName: "Perusahaan Contoh",
          description: "Ini adalah deskripsi tentang perusahaan kami.",
        };
      },
    },
    {
      path: "/users/:userId",
      element: <User />,
    },
  ]);

  function App() {
    return (
      <RouterProvider router={router} />
    );
  }

  export default App;
  

Perhatikan penambahan properti loader ke konfigurasi rute /about. Fungsi loader ini mengembalikan objek dengan dua properti: companyName dan description.

Mengakses Data dengan useLoaderData

Untuk mengakses data yang dikembalikan oleh fungsi loader, kita menggunakan hook useLoaderData di dalam komponen rute. Hook ini mengembalikan data yang dikembalikan oleh fungsi loader yang terkait dengan rute saat ini.

Modifikasi About.js untuk menggunakan useLoaderData:

  import React from 'react';
  import { Link, useLoaderData } from 'react-router-dom';

  function About() {
    const data = useLoaderData();

    return (
      <div>
        <h1>Tentang Kami</h1>
        <p>Nama Perusahaan: {data.companyName}</p>
        <p>Deskripsi: {data.description}</p>
        <Link to="/">Kembali ke Halaman Beranda</Link>
      </div>
    );
  }

  export default About;
  

Penjelasan kode:

• import { useLoaderData } from 'react-router-dom';: Mengimpor hook useLoaderData dari react-router-dom.
• const data = useLoaderData();: Menggunakan hook useLoaderData untuk mendapatkan data yang dikembalikan oleh fungsi loader.
• <p>Nama Perusahaan: {data.companyName}</p>: Menampilkan nilai properti companyName dari data.
• <p>Deskripsi: {data.description}</p>: Menampilkan nilai properti description dari data.

Refresh browser Anda dan buka halaman /about. Anda akan melihat data statis yang diambil oleh fungsi loader ditampilkan di dalam komponen About.

Penanganan Error: Komponen ErrorBoundary

Salah satu keuntungan besar dari Data Mode adalah kemudahan penanganan error. Jika terjadi error selama pengambilan data di dalam fungsi loader, React Router akan merender komponen ErrorBoundary yang Anda tentukan.

Untuk menambahkan penanganan error, kita perlu membuat komponen ErrorBoundary dan menambahkannya ke konfigurasi rute.

Buat file baru bernama ErrorPage.js:

  import React from 'react';
  import { useRouteError } from 'react-router-dom';

  function ErrorPage() {
    const error = useRouteError();
    console.error(error);

    return (
      <div>
        <h1>Oops!</h1>
        <p>Maaf, terjadi kesalahan yang tidak terduga.</p>
        <p>
          <em>{error.statusText || error.message}</em>
        </p>
      </div>
    );
  }

  export default ErrorPage;
  

Penjelasan kode:

• import { useRouteError } from 'react-router-dom';: Mengimpor hook useRouteError dari react-router-dom.
• const error = useRouteError();: Menggunakan hook useRouteError untuk mendapatkan informasi tentang error yang terjadi.
• <em>{error.statusText || error.message}</em>: Menampilkan pesan error.

Sekarang, tambahkan properti errorElement ke root router di App.js:

  import React from 'react';
  import {
    createBrowserRouter,
    RouterProvider,
  } from "react-router-dom";
  import Home from './Home';
  import About from './About';
  import User from './User';
  import ErrorPage from './ErrorPage';

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/about",
      element: <About />,
      loader: () => {
        return {
          companyName: "Perusahaan Contoh",
          description: "Ini adalah deskripsi tentang perusahaan kami.",
        };
      },
    },
    {
      path: "/users/:userId",
      element: <User />,
    },
  ], {
    basename: "/",
    errorElement: <ErrorPage />
  });

  function App() {
    return (
      <RouterProvider router={router} />
    );
  }

  export default App;
  

Untuk menguji penanganan error, mari kita sengaja membuat error di fungsi loader untuk rute /about:

  import React from 'react';
  import {
    createBrowserRouter,
    RouterProvider,
  } from "react-router-dom";
  import Home from './Home';
  import About from './About';
  import User from './User';
  import ErrorPage from './ErrorPage';

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/about",
      element: <About />,
      loader: () => {
        throw new Error("Gagal mengambil data!");
      },
    },
    {
      path: "/users/:userId",
      element: <User />,
    },
  ], {
    basename: "/",
    errorElement: <ErrorPage />
  });

  function App() {
    return (
      <RouterProvider router={router} />
    );
  }

  export default App;
  

Sekarang, refresh browser Anda dan buka halaman /about. Anda akan melihat komponen ErrorPage ditampilkan dengan pesan error “Gagal mengambil data!”.

Konsep Dasar Selesai!

Selamat! Anda telah berhasil menginstal React Router v6.4+, mengkonfigurasi rute awal, membuat komponen rute, menambahkan link, menggunakan fungsi loader untuk mengambil data, dan menangani error. Ini adalah dasar yang kuat untuk menjelajahi lebih banyak fitur Data Mode di bagian selanjutnya.

Kesimpulan

Dalam bagian pertama dari seri ini, kita telah membahas dasar-dasar React Router Data Mode. Kita belajar cara menginstal React Router v6.4+, mengkonfigurasi router menggunakan createBrowserRouter, membuat komponen rute, menambahkan link, mengambil data menggunakan fungsi loader, dan menangani error dengan komponen ErrorBoundary. Di bagian selanjutnya, kita akan menjelajahi fitur-fitur yang lebih canggih dari Data Mode, seperti mengambil data dari API, menggunakan action untuk menangani mutasi data, dan mengoptimalkan performa aplikasi Anda.