Định tuyến chỉ mục trong React Router

Trong bài học này, chúng ta sẽ tìm hiểu định tuyến chỉ mục là gì.

Đầu tiên, hãy chú ý một điều. Khi chúng ta ở trang chủ, bên phải chúng ta thấy chỉ là một màn hình trống. Đó là bởi vì không có định tuyến con nào phù hợp với địa chỉ /, và chúng ta đã không nói phải hiển thị gì trong trường hợp này. Trong trường hợp như vậy, để không hiển thị trang trống, chúng ta có thể sử dụng định tuyến chỉ mục - một định tuyến con không có đường dẫn và phần tử của nó được hiển thị trong Outlet của cha khi không có định tuyến con nào trong nhóm phù hợp. Với các định tuyến như vậy, chúng ta có thể đặt thông tin, hoặc số liệu thống kê, hoặc bất cứ thứ gì tương tự. Cũng như với các định tuyến thông thường, chúng có thể được sử dụng để tải dữ liệu.

Hãy tạo tệp index.jsx trong thư mục routes và trong đó là thành phần Index:

export default function Index() {
	return (
		<div>
			<p>Chào, React Router!</p>
			<p>Đây là ứng dụng cho các sản phẩm của tôi :)</p>
		</div>
	);
}

Bây giờ hãy chuyển đến main.jsx và nhập thành phần Index của chúng ta vào đó:

import Index from './routes/index';

Và thêm một đối tượng vào phần tử đầu tiên của mảng children, trong đó thuộc tính index được đặt thành true và thành phần để hiển thị sẽ là Index của chúng ta:

{ index: true, element: <Index /> },

Hãy lấy ứng dụng bạn đã tạo trong bài tập của bài học trước. Sử dụng tài liệu của bài học, hãy thêm một định tuyến chỉ mục với địa chỉ trang chủ cùng một số văn bản.