Rute Bersarang di React Router

Pada pelajaran ini kita akan berkenalan dengan rute bersarang. Jalankan aplikasi yang kita buat pada pelajaran sebelumnya. Dengan mengklik tautan, kita masuk ke halaman produk terpisah. Anggaplah kita merasa tidak nyaman dengan hal tersebut, dan kita ingin daftar produk dan halaman produk ditampilkan bersebelahan, pada satu layar untuk kejelasan yang lebih baik. Mari kita lakukan hal tersebut.

Untuk melakukan ini, mari buka file main.jsx dan cukup buat rute kita untuk halaman produk menjadi rute anak dari rute root atau, dengan kata lain "sematkan" ke dalam rute root. Untuk melakukan ini, kita akan menggunakan properti lain dari objek rute children:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

Kita mengklik tautan lagi, tetapi di sebelah kanan daftar produk kita tidak melihat apa-apa. Itu karena kita tidak memberi tahu rute root di mana kita ingin merender rute anaknya.

Tepat untuk merender elemen-elemen rute anak di dalam induknya, komponen Outlet akan membantu kita. Mari impor dari pustaka ke file untuk rute root:

import { Outlet } from 'react-router-dom';

Kemudian bungkus dalam div #product dan tambahkan ke tata letak untuk rute root di akhir markup setelah tag penutup nav, dan bungkus seluruh konstruksi dalam satu div #main lagi:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

Dengan mengklik tautan, sekarang kita melihat baik daftar produk maupun halaman produk.

Mari tambahkan sedikit gaya ke index.css kita:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

Ambil aplikasi yang Anda buat dalam tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, buat rute untuk halaman mahasiswa menjadi bersarang di dalam root.

Dan sekarang buat sehingga saat mengklik tautan, daftar mahasiswa dan halaman mahasiswa ditampilkan di layar.