Rute di React Router

Rute (Routes) merupakan bagian terpenting dari sebuah aplikasi yang menggunakan React Router. Mari kita lihat sepotong kode dari pelajaran sebelumnya:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello Router!</div>,
  },
]);

Nah, properti objek path dan element yang kita teruskan ke fungsi saat membuat router, itulah properti dari objek Route. Sebenarnya, objek ini memiliki banyak properti, yang dapat ditemukan di dokumentasi resmi. Ke depannya, beberapa di antaranya akan berguna bagi kita:

jsxinterface RouteObject {
  path?: string;
  index?: boolean;
  children?: React.ReactNode;
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  errorElement?: React.ReactNode | null;
  ErrorBoundary?: React.ComponentType | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction;
  lazy?: LazyRouteFunction<RouteObject>;
}

Kita juga bisa menggunakan gaya JSX alternatif dan menuliskan properti sebagai props untuk komponen Route, maka potongan kode kita akan terlihat seperti ini:

main.jsxconst router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path = '/'
      element = {<div>Hello Router!</div>}
    />
  )
);

Dan tentu saja, kita perlu menambahkan beberapa baris lagi di impor:

main.jsximport {
  createRoutesFromElements,
  createBrowserRouter,
  RouterProvider,
  Route,
} from 'react-router-dom';

Kedua gaya yang ditunjukkan dalam pelajaran ini setara. Kami selanjutnya akan menggunakan varian pertama.