Định tuyến song song trong NextJS

Trong NextJS, bạn có thể làm sao cho một phần của trang web hiển thị nội dung khác nhau tùy thuộc vào URL được yêu cầu. Điều này được gọi là định tuyến song song.

Hãy xem một ví dụ. Giả sử chúng ta có bố cục trang web sau:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<header>
					header
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

Giả sử chúng ta muốn trong phần đầu trang (header) hiển thị thông tin động. Giả sử theo URL /users sẽ hiển thị component với người dùng, còn theo URL /posts là component với bài viết.

Để có định tuyến song song như vậy cần tạo một thư mục đặc biệt, bắt đầu tên của nó bằng ký tự @. Ví dụ, hãy đặt tên thư mục của chúng ta là @info.

Trong thư mục này, chúng ta đặt hai component. Component đầu tiên để hiển thị người dùng trong thư mục /users/, và component thứ hai để hiển thị bài viết trong thư mục /posts/. Chúng ta sẽ có cấu trúc tệp như sau:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

Bây giờ chúng ta cần trong bố cục trang web viết một lệnh đặc biệt để chèn vào. Để làm điều này cần sử dụng một khe động đặc biệt.

Để hiểu nó là gì, trước tiên hãy nhìn vào tham số của hàm bố cục trang web của chúng ta:

export default function RootLayout({children}) {
	return (
		
	);
}

Hãy chú ý rằng tham số được truyền cho chúng ta là một đối tượng, từ đó chúng ta trích xuất nội dung trang web vào biến children.

Trong đối tượng này có thể có các khóa khác. Chúng tương ứng với những thư mục mà tên của chúng chúng ta bắt đầu bằng @.

Trong trường hợp của chúng ta, chúng ta có thư mục @info, điều này có nghĩa là chúng ta sẽ có thể truy cập biến info, tùy thuộc vào URL chứa văn bản của một trong các component - người dùng hoặc bài viết. Hãy lấy biến này:

export default function RootLayout({children, info}) {
	return (
		
	);
}

Bây giờ bên trong phần giao diện của bố cục, chúng ta có thể hiển thị biến info. Tại vị trí này, tùy thuộc vào URL, sẽ được chèn vào văn bản của một trong các component của chúng ta:

export default function RootLayout({children, info}) {
	return (
		<html lang="en">
			<body>
				<header>
					<div>
						{info}
					</div>
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

Hãy tạo một khe động cho thanh bên phải.

Hãy tạo một khe động cho thanh bên trái.