Routing Nested

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

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

export default [
  index('routes/home.tsx'),
  route('about', 'routes/about.tsx', [
    route('team', 'routes/about/team.tsx')
  ]),
] satisfies RouteConfig;

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.

import { Outlet } from 'react-router';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <Outlet />
    </div>
  );
}

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

<About>
  <Team />
</About>

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:

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

export default [
  index('routes/home.tsx'),
  route('about', 'routes/about.tsx', [
    //           ^^^ ini yang jadi layout subhalaman /about
    index('routes/about-index.tsx'), // ini yang jadi konten halaman /about
    route('team', 'routes/about-team.tsx')
  ]),
] satisfies RouteConfig;

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

import { Outlet } from 'react-router';

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

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

export default function AboutIndex() {
  return <p>Ini adalah halaman About</p>;
}

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

export default function AboutTeam() {
  return <p>Ini adalah halaman Tim</p>;
}

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

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

export default [
  index('routes/home.tsx'),
  route('about', 'routes/about.tsx'),
  route('about/team', 'routes/about-team.tsx'),
] satisfies RouteConfig;

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!