Xử lý lỗi Not Found trong React Router

Khi tạo ứng dụng, cần chú ý đến việc xử lý các lỗi khác nhau có thể xuất hiện trong quá trình sử dụng sau này. Trong bài học này, chúng ta sẽ học cách làm việc với lỗi 'Not Found'. Lỗi này có thể xảy ra, ví dụ, nếu người dùng nhấp vào liên kết dẫn đến một trang không tồn tại.

Đầu tiên, hãy mở ứng dụng của chúng ta, ứng dụng mà chúng ta đã làm trong các bài học trước, và thay thế phần tử của component Root. Bây giờ khi khởi chạy ứng dụng, chúng ta sẽ hiển thị một danh sách gồm hai sản phẩm:

function Root() {
	return (
		<nav>
			<a href={`/products/1`}>Sản phẩm 1</a>
			<a href={`/products/2`}>Sản phẩm 2</a>
		</nav>
	);
}

export default Root;

Hãy thêm một chút kiểu dáng vào index.css:

body {
	font-size: 18px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

a {
	text-decoration: none;
	color: blue;
}

Và bây giờ hãy nhấp thử vào các liên kết. Vì chúng ta không có bố cục trang cho các sản phẩm của mình, nên các liên kết chỉ dẫn chúng ta đến màn hình lỗi '404 Not Found' và một lời trách móc rằng chúng ta có thể tự nghĩ ra một cái gì đó đẹp hơn và thú vị hơn so với những gì React Router hiển thị cho chúng ta theo mặc định.

Hãy tạo trang riêng của chúng ta, trang sẽ được hiển thị trong trường hợp xảy ra lỗi 404. Để làm điều này, trong thư mục src hãy tạo một tệp error-page-404.jsx.

Bên trong React component ErrorPage404, chúng ta sẽ sử dụng hook useRouteError để bắt lỗi, mà chúng ta sẽ in ra console:

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

function ErrorPage404() {
	const error = useRouteError();
	console.error(error);

}

export default ErrorPage404;

Tiếp theo, trong phần tử của component ErrorPage404 chúng ta sẽ hiển thị một vài tiêu đề, thông báo về lỗi và xuất ra các thuộc tính của đối tượng error như statusText và data (bạn cũng có thể thấy đối tượng error và các thuộc tính của nó nếu bạn mở console và bắt đầu nhấp vào các liên kết trong ứng dụng của chúng ta).

return (
	<div>
		<h1>Xin chào! Đây là Trang Lỗi</h1>
		<h2>Lỗi 404 Không Tìm Thấy</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Nhớ đừng quên mở tệp main.jsx và thêm một dòng nhập khẩu nữa cho ErrorPage404:

import ErrorPage404 from './error-page-404';

Và cũng thêm một thuộc tính nữa là errorElement vào đối tượng Router - phần tử này được hiển thị khi xảy ra lỗi trên tuyến đường này. Giá trị của phần tử lỗi sẽ là component của chúng ta ErrorPage404:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
	},
]);

Hãy lấy ứng dụng do bạn tạo trong bài tập của bài học trước. Thêm vào trang chủ một danh sách, bao gồm một vài liên kết, như được minh họa trong bài học. Hãy để giá trị của href các liên kết là - /students/1 và /students/2, còn văn bản của liên kết là 'Student1' và 'Student2' tương ứng. Hãy đảm bảo rằng khi nhấp vào các liên kết bạn sẽ thấy màn hình lỗi mà React Router hiển thị theo mặc định.

Và bây giờ hãy tạo trang lỗi 404 riêng của bạn, bạn có thể hiển thị trên đó bất cứ thứ gì bạn muốn. Kết nối nó như được minh họa trong bài học. Và bây giờ hãy đảm bảo rằng khi nhấp vào các liên kết, bạn sẽ đến đúng trang đó.