Rute di React Router

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

const 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:

interface 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:

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

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

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

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

Ambil aplikasi yang Anda buat di tugas pelajaran sebelumnya. Cobalah menulis ulang sepotong kode untuk membuat router (yang lama bisa dikomentari sementara), menggunakan sintaksis JSX alternatif yang ditunjukkan dalam pelajaran. Pastikan aplikasi berjalan.

Kembalikan semua kode lama ke tempatnya, dan hapus kode baru. Pastikan aplikasi berjalan.