Routing Prefix

2. sedangkan kalau pakai prefix, nggak bakal ada hubungan apa-apa kayak di nested route. fungsi prefix di React Router cuma buat mempermudah penulisan beberapa route dengan awalan yang sama aja sebenernya, supaya menghindari duplikasi kode. sebagai contoh:

export default [
  route("admin/products", "routes/admin/products.tsx");
  route("admin/users", "routes/admin/users.tsx");
  route("admin/settings", "routes/admin/settings.tsx");
];

ketiga route di atas punya awalan (prefix) yang sama, yaitu "admin". di sini fungsi prefix berperan. dengan prefix kita bisa membuat beberapa route tadi memiliki awalan (prefix) yang sama tanpa menulisnya berulang-ulang.

export default [
  ...prefix("admin", [
    route("products", "routes/admin/products.tsx");
    route("users", "routes/admin/users.tsx");
    route("settings", "routes/admin/settings.tsx");
  ]);
];

dari sini kita bisa lihat, kenapa di React Router ada kedua fitur ini.

1. bedanya adalah dengan pendekatan nested route, itu bakal bikin hubungan parent-child antar route. sebagai contoh:

export default [
  route("parent", "routes/parent.tsx", [ // <= ini adalah route parent
    route("child". "routes/child.tsx"); // <= ini adalah route child
  ])
];

itu kenapa kalau pakai cara ini, kita harus pake <Outlet /> nge-render child route yang aktif di dalam parent route. jika divisualkan dengan kode, akan menghasilkan kode seperti ini:

<ParentRoute>
  <ChildRoute />
</ParentRoute>

kalau bisa dengan prefix atau routing nested yg pakai Outlet. lalu kenapa ada dua-duanya di react router 7?