Các tuyến đường lồng nhau trong React Router

Trong bài học này, chúng ta sẽ làm quen với các tuyến đường lồng nhau. Hãy khởi chạy ứng dụng mà chúng ta đã làm trong bài học trước. Khi nhấp vào các liên kết, chúng ta sẽ đi đến một trang riêng với sản phẩm. Giả sử chúng ta cảm thấy điều đó không tiện và muốn danh sách sản phẩm và trang sản phẩm hiển thị cạnh nhau, trên cùng một màn hình để dễ hình dung hơn. Hãy cùng thực hiện điều đó.

Để làm điều này, hãy mở tệp main.jsx và đơn giản là biến tuyến đường cho trang sản phẩm thành một tuyến đường con của tuyến đường gốc hoặc, nói cách khác là "lồng" nó vào trong tuyến đường gốc. Để làm vậy, chúng ta sẽ sử dụng một thuộc tính khác của đối tượng tuyến đường children:

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

]);

Chúng ta nhấp vào các liên kết một lần nữa, nhưng ở bên phải danh sách sản phẩm chúng ta không thấy gì cả. Lý do là vì chúng ta chưa chỉ cho tuyến đường gốc biết nơi chúng ta muốn hiển thị các tuyến đường con của nó.

Chính để render các phần tử của tuyến đường con trong tuyến đường cha, thành phần Outlet sẽ giúp chúng ta. Hãy import nó từ thư viện vào tệp cho tuyến đường gốc:

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

Sau đó, hãy bọc nó trong một thẻ div #product và thêm vào bố cục cho tuyến đường gốc ở cuối phần đánh dấu, sau thẻ đóng nav, và bọc toàn bộ cấu trúc trong một thẻ div #main khác:

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

Bây giờ khi nhấp vào các liên kết, chúng ta có thể thấy cả danh sách sản phẩm và trang sản phẩm.

Hãy thêm một chút kiểu dáng vào tệp index.css của chúng ta:

h1, h2 {
	margin: 0;
}

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

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

Hãy lấy ứng dụng mà bạn đã tạo trong bài tập của bài học trước. Sử dụng tài liệu từ bài học, hãy biến tuyến đường cho trang sinh viên thành một tuyến đường lồng trong tuyến đường gốc.

Và bây giờ hãy làm sao cho khi nhấp vào các liên kết, cả danh sách sinh viên và trang sinh viên đều được hiển thị trên màn hình.