Menambahkan Router ke React Router

Setelah sedikit berkenalan dengan router, kita dapat menambahkan salah satunya ke dalam aplikasi.

Tapi pertama-tama, kita perlu sedikit membersihkan template aplikasi kita, yang kita buat di pelajaran sebelumnya. Lebih tepatnya - kita akan mengurus folder src. Buang darinya folder assets, file-file App.css, App.jsx. Singkatnya, yang tersisa di dalamnya hanyalah main.jsx dan index.css.

Buka index.css dan kosongkan sepenuhnya. Biarkan tetap kosong.

Sekarang kita akan mengurus file utama kita main.jsx. Di dalamnya akan ada kode seperti ini:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

Dan sekarang kita bisa menambahkan router. Kita akan menggunakan BrowserRouter, karena paling sering digunakan dalam aplikasi web. Jangan lupa juga dengan sintaks modern. Tambahkan baris impor:

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

Kemudian, buat konstanta router dan buat BrowserRouter kita setelah baris-baris impor. Lakukan ini sehingga pada halaman utama kita ditampilkan div dengan tulisan 'Hello Router!'. Untuk itu, tentukan path ke halaman utama dan elemen yang akan ditampilkan:

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

Kita masih perlu menambahkan komponen RouterProvider dan masukkan router yang telah kita buat di atas. Komponen ini menerima semua objek router, merender aplikasi kita, dan menghubungkan API lainnya:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Kode lengkapnya akan terlihat seperti ini:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

Simpan perubahan. Selamat! Aplikasi kita tidak lagi menghasilkan error. Sekarang, jika kita menjalankannya, maka pada halaman utama di browser kita akan melihat 'Hello Router!'.

Menggunakan materi yang diberikan, buatlah sehingga pada halaman utama aplikasi Anda, yang Anda buat di tugas rumah untuk pelajaran sebelumnya, Anda menampilkan paragraf dengan teks 'I'm number one in React!'.