Laluan Bersarang dalam React Router

Dalam pelajaran ini, kita akan berkenalan dengan laluan bersarang. Jalankan aplikasi yang kami buat dalam pelajaran lepas. Dengan mengklik pada pautan, kita akan sampai ke halaman produk yang berasingan. Katakan kita tidak selesa dengan keadaan itu, dan kita ingin senarai produk dan halaman produk dipaparkan bersebelahan, pada satu skrin untuk lebih kejelasan. Mari kita buat begitu.

Untuk melakukan ini, mari buka fail main.jsx dan jadikan laluan untuk halaman produk sebagai laluan anak kepada laluan akar atau, dalam kata lain, "sarangkannya" ke dalam laluan akar. Untuk ini, kita akan gunakan satu lagi sifat objek laluan children:

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

]);

Kita klik pada pautan sekali lagi, tetapi di sebelah kanan senarai produk kita tidak nampak apa-apa. Ini kerana kita tidak memberitahu laluan akar di mana kita mahu memaparkan laluan anaknya.

Untuk merender elemen laluan anak dalam elemen ibu bapa, komponen Outlet akan membantu kita. Mari importnya dari pustaka ke dalam fail untuk laluan akar:

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

Kemudian, balutkannya dalam div #product dan tambahkannya ke dalam susun atur untuk laluan akar di akhir markup selepas tag penutup nav, dan balut keseluruhan struktur dalam satu lagi div #main:

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 pada pautan, kini kita dapat melihat kedua-dua senarai produk dan halaman produk.

Mari tambah sedikit gaya kepada index.css kami:

h1, h2 {
	margin: 0;
}

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

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

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, jadikan laluan untuk halaman pelajar sebagai laluan bersarang dalam laluan akar.

Dan sekarang, buat supaya apabila mengklik pada pautan, kedua-dua senarai pelajar dan halaman pelajar dipaparkan pada skrin.