Pembahasan

Routing Layout

Ketika lo mau bikin layout yang berbeda buat beberapa route, lo bisa bungkus route tersebut di dalam fungsi layout. Misal, lo mau bikin layout buat halaman admin dan marketing, lo bisa bikin kayak gini:

app/routes.ts

import { type RouteConfig, index, layout } from '@react-router/dev/routes';

export default [
  // route yang lain...
  
  // route admin
  layout('routes/admin/layout.tsx', [
    index('routes/admin/index.tsx'),
    route('users', 'routes/admin/users.tsx'),
    route('products', 'routes/admin/products.tsx'),
  ]),
  // route marketing
  layout('routes/marketing/layout.tsx', [
    index('routes/marketing/index.tsx'),
    route('blog', 'routes/marketing/blog.tsx'),
    route('contact', 'routes/marketing/contact.tsx'),
  ]),
] satisfies RouteConfig;

Di dalam file masing-masing layout, lo bisa define <Outlet /> yang bakal nge-render child route. Contohnya, di file app/routes/admin/layout.tsx:

app/routes/admin/layout.tsx

import { Outlet } from 'react-router';

export default function AdminLayout() {
  return (
    <div>
      <h1>Admin Layout</h1>
      <nav>
        {/* navigasi admin di sini */}
      </nav>
      <Outlet />
    </div>
  );
}

Sama kayak layout yang ada di file app/root.tsx, layout ini juga nggak bakal di-render ulang ketika user pindah-pindah route yang ada di layout tersebut.

Routing Layout

Sudah paham pelajaran ini?

Diskusi