Routing Basic

Secara bawaan, React Router punya sistem routing yang sentris, jadi lo bisa bikin routing di satu file routes.ts yang ada di folder app. Kalo lo buka file tersebut, lo bakal nemu satu route bawaan yang jadi halaman utama bawaan React Router:

Kalo lo mau bikin route baru, tinggal tambahin aja di array tersebut. Misal, lo mau bikin route /about, lo bisa tambahin kayak gini:

Fungsi route butuh dua parameter: path dan file module-nya yang bakal di-render ketika route tersebut match atau diakses.

Isi dari file route module-nya itu React component yang diekspor secara default. Contohnya kayak gini:

Kalo lo liat lagi file routes.ts, di sana lo notice ada index dan route. index itu buat route yang jadi halaman utama dari parent route-nya, sedangkan route itu buat route biasa. Secara teknis kalo lo ganti index ke route, itu juga bakal jalan, tapi secara semantik lebih baik pake index kalo itu halaman utama dari parent route-nya.

Setiap file yang lo referensiin di routes.ts itu disebut route module. Route module ini bisa punya beberapa fungsi yang bisa lo export, kayak loader, action, dan meta. Kalo liat lagi kode di atas, file routes/home.tsx dan routes/about.tsx itu adalah route module.

Path import route module ini relatif ke file routes.ts, ini berarti dia mulai dari folder app. Jadi, ketika lo nulis routes/home.tsx, itu berarti lo ngimpor file home.tsx yang ada di dalam folder app/routes.

Di mana lo mau naruh route module itu terserah lo, karena nggak ada convention khusus buat itu. Cuman, biasanya orang naruh di folder routes atau pages biar gampang dicari dan lebih terstruktur.

Kayak gini nggak masalah:

Kalo kayak gini lo nggak perlu lagi bikin struktur folder yang dalem-dalem buat ngikutin struktur path-nya. Hal ini juga yang ngatasin masalah pribadi gue, dan akhirnya gue bisa bikin struktur folder yang sedangkal mungkin.