File Based Routing

Sebelumnya telah kita bahas jika di folder route kita dapat mendifinisikan halaman-halaman dan sub-halaman di dalam aplikasi kita. Halaman-halaman bisa kita definisikan dalam bentuk file atau folder, biar lebih paham mari kita praktekkan.

Buat file bernama about-us.jsx di dalam folder app/routes, lalu isi dengan code berikut

export const meta = () => {
    return [{ title: "About Page" }];
  };

export default function Index() {
   return <div>
    <h1>This Is About</h1>
   </div>;
}

Sekarang coba akses http://localhost:3000/about-us

Nah, sekarang coba ubah nama file about-us.jsx menjadi about.jsx, lalu coba akses kembali http://localhost:3000/about-us

Karena kita mengubah nama filenya menjadi about.jsx maka sekarang kita akan mendapati http://localhost:3000/about-us Not Found. Url akan mengikuti nama file yang kita buat di dalam folder app/routes

Jika kamu mengalami kendala NOT FOUND ketika mengakses route baru, silahkan jalankan ulang npm run dev.

Membuat nested url

Pada contoh sebelumnya kita telah berhasil membuat url untuk halaman about, pertanyaannya bagaimana jika kita hendak membuat nested url semisal about/team. Mari kita langsung ke contoh biar lebih mudah memahaminya.

Sekarang buat file baru bernama about_.team.jsx dan isi dengan code berikut:

export const meta = () => {
  return [{ title: "Team Page" }];
};

export default function Index() {
 return <div>
  <h1>This Is Team</h1>
 </div>;
}

Berikut penjelasan about_.team.jsx

• about_ kita ingin menggunakan awalan url segment about tanpa terkait layout apapun dari about.jsx.
• .team Url segment terakhir atau team.

Lalu akses http://localhost:3000/about/team

Membuat Dynamic Routes

Jika dua contoh diatas kita mendifinisikan halaman yang sifatnya statis, lalu bagaimana jika dinamis? contohnya kita ingin membuat halaman detail menggunakan param ID seperti ini /post/1. Kalian bisa menggunakan prefix $, begini contohnya:

Buat file route baru bernama post.$postId.jsx, lalu sekarang coba akses /post/1 kalian akan mendapati hasil seperti dibawah ini.

Sebenarnya masih banyak konfigurasi route di Remix tapi untuk saat ini cukup tiga ini yang perlu kita ketahui, jika kalian ingin belajar lebih lagi, bisa langsung ke halaman dokumentasinya.