Membuat Rute Root di React Router

Seringkali rute utama, yang mengarah ke halaman beranda, disebut sebagai rute root (root route), karena rute lainnya akan di-render di dalamnya. Sangat mudah untuk membayangkannya sebagai komponen terpisah. Jadi, mari kita ambil kembali aplikasi kita dan di folder src buatlah folder lain dan beri nama routes. Sekarang di folder ini, buat file root.jsx untuk komponen React terpisah Root. Kode dalam file akan terlihat seperti ini:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

Dan sekarang mari kita ubah sedikit kode di file main.jsx, karena sebagai nilai element kita sekarang akan meneruskan komponen Root, dan kontennya sekarang berada di file terpisah root.jsx:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

Jangan lupa baris impor dengan komponen kita di main.jsx:

import Root from './routes/root';

Buka aplikasi yang Anda buat di tugas pelajaran sebelumnya. Buatlah untuk rute root sebuah komponen React terpisah Root dalam file terpisah root.jsx, seperti yang dijelaskan dalam pelajaran ini. Lakukan perubahan pada main.jsx Anda.