Định Tuyến trong React Router

Định tuyến (Routes) là phần quan trọng nhất của ứng dụng trên React Router. Hãy xem xét đoạn mã từ bài học trước:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

Vậy, các thuộc tính path và element mà chúng ta truyền vào hàm khi tạo bộ định tuyến, chính là các thuộc tính của đối tượng Route. Trên thực tế, đối tượng này có rất nhiều thuộc tính, chúng có thể được tìm thấy trong tài liệu chính thức. Về sau, một số thuộc tính trong đó sẽ hữu ích cho chúng ta:

interface RouteObject {
	path?: string;
	index?: boolean;
	children?: React.ReactNode;
	caseSensitive?: boolean;
	id?: string;
	loader?: LoaderFunction;
	action?: ActionFunction;
	element?: React.ReactNode | null;
	Component?: React.ComponentType | null;
	errorElement?: React.ReactNode | null;
	ErrorBoundary?: React.ComponentType | null;
	handle?: RouteObject["handle"];
	shouldRevalidate?: ShouldRevalidateFunction;
	lazy?: LazyRouteFunction<RouteObject>;
}

Có thể sử dụng phong cách JSX thay thế và viết các thuộc tính dưới dạng props cho thành phần Route, khi đó đoạn mã của chúng ta sẽ trông như thế này:

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route
			path = '/'
			element = {<div>Hello Router!</div>}
		/>
	)
);

Và, tất nhiên, cần phải thêm một vài dòng vào phần import:

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

Cả hai phong cách được trình bày trong bài học đều có giá trị như nhau. Trong phần tiếp theo, chúng ta sẽ tuân theo phương án đầu tiên.

Lấy ứng dụng mà bạn đã tạo trong các bài tập của những bài học trước. Hãy thử viết lại đoạn mã để tạo bộ định tuyến (phần cũ hãy tạm thời ghi chú lại), sử dụng cú pháp JSX thay thế được trình bày trong bài học. Hãy đảm bảo ứng dụng hoạt động.

Khôi phục toàn bộ mã cũ về vị trí cũ, và loại bỏ mã mới. Hãy đảm bảo ứng dụng hoạt động.