Routing Nested

Anggap halaman /about itu punya subhalaman /about/team. Lo bisa bikin route-nya kayak gini:

Kalo lo akses /about/team, lo bakal liat tampilan yang sama kayak /about. Ini karena route /about dianggap sebagai parent dari route /about/team. Untuk itu, lo perlu nge-render component <Outlet /> di dalam component /about supaya subhalaman tersebut bisa ditampilin.

Secara teknis, route module /about/team ini dibungkus di dalam route module /about. Kayak gini kira-kira:

Ini berarti route module /about juga bisa kita dijadikan sebagai layout untuk subhalaman /about/team dan subhalaman lainnya yang ada di bawahnya. Ini bermanfaat banget ketika lo mau bikin semacam sub-menu berupa sidebar atau tab yang ada di dalam halaman /about.

Ini juga berarti, dalam konteks ini, lo nggak perlu naruh konten halaman /about di dalam file routes/about.tsx. File tersebut bisa dijadiin sebagai layout aja, dan lo bisa bikin file baru yang khusus buat konten halaman /about di dalam file app/routes/about-index.tsx, misalnya.

Jadinya kayak gini:

Untuk isi file app/routes/about.tsx, lo bisa bikin kayak gini:

Sedangkan untuk file app/routes/about-index.tsx, lo bisa bikin kayak gini:

Dan untuk file app/routes/about-team.tsx, lo bisa bikin kayak gini:

In case lo nggak mau bikin nested route dengan struktur kayak gini, lo bisa bikin pake cara yang lebih simpel:

Kalo kayak gini, file app/routes/about.tsx nggak perlu pake <Outlet /> lagi, karena nggak ada subhalaman yang di-render di dalamnya dan kedua route tersebut nggak punya parent-child relationship. That's perfectly fine kalo lo butuhnya kayak gini.

If it works, it works!