Επεξεργασία του σφάλματος Not Found στο React Router

Κατά τη δημιουργία μιας εφαρμογής πρέπει να δώσουμε προσοχή και στην εμφάνιση διαφόρων σφαλμάτων κατά τη διάρκεια της χρήσης της. Σε αυτό το μάθημα θα μάθουμε να δουλεύουμε με το σφάλμα 'Not Found'. Ένα τέτοιο σφάλμα μπορεί να εμφανιστεί, για παράδειγμα, εάν ένας χρήστης κλικάρει σε έναν σύνδεσμο που οδηγεί σε μια μη υπάρχουσα σελίδα.

Αρχικά, ας ανοίξουμε την εφαρμογή μας, που φτιάξαμε σε προηγούμενα μαθήματα, και ας αντικαταστήσουμε τη σήμανση του στοιχείου Root. Τώρα κατά την εκκίνηση της εφαρμογής θα εμφανίζεται μια λίστα με δύο προϊόντα:

function Root() {
	return (
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
	);
}

export default Root;

Ας προσθέσουμε λίγο στυλ στο index.css:

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

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

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

Και τώρα κλικάρετε στους συνδέσμους. Εφόσον δεν έχουμε διατάξεις σελίδων για τα προϊόντα μας, οι σύνδεσμοι θα μας οδηγήσουν μόνο στην οθόνη με το σφάλμα '404 Not Found' και μια υπόδειξη ότι θα μπορούσαμε να έχουμε φτιάξει κάτι πιο όμορφο και πιο ενδιαφέρον από αυτό που το React Router εμφάνισε από προεπιλογή.

Ας φτιάξουμε τη δική μας σελίδα, που θα εμφανίζεται στην περίπτωση εμφάνισης του σφάλματος 404. Για αυτό, στο φάκελο src θα δημιουργήσουμε το αρχείο error-page-404.jsx.

Μέσα στο React στοιχείο ErrorPage404 θα χρησιμοποιήσουμε το hook useRouteError για να πιάσουμε το σφάλμα, που θα εκτυπώνουμε στην κονσόλα:

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

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

}

export default ErrorPage404;

Στη συνέχεια, στη σήμανση του στοιχείου ErrorPage404 θα εμφανίζουμε μερικές επικεφαλίδες, που αναφέρουν το σφάλμα και θα εμφανίσουμε ιδιότητες του αντικειμένου error, όπως statusText και data (το αντικείμενο error και οι ιδιότητές του μπορείτε επίσης να δείτε, αν ανοίξετε την κονσόλα και αρχίσετε να κλικάρετε στους συνδέσμους στην εφαρμογή).

return (
	<div>
		<h1>Γεια! Αυτή είναι μια Σελίδα Σφάλματος</h1>
		<h2>Σφάλμα 404 Not Found</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Φροντίστε να ανοίξετε το αρχείο main.jsx και να προσθέσετε ακόμη μια γραμμή εισαγωγής για το ErrorPage404:

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

Και επίσης προσθέστε ακόμη μια ιδιότητα errorElement στο αντικείμενο Router - αυτό το στοιχείο εμφανίζεται, όταν σε αυτή τη διαδρομή προκύψει σφάλμα. Η τιμή του στοιχείου σφάλματος θα είναι το στοιχείο μας ErrorPage404:

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

Πάρτε την εφαρμογή, που δημιουργήσατε στο άσκηση του προηγούμενου μαθήματος. Προσθέστε στην κύρια σελίδα μια λίστα, που αποτελείται από δύο συνδέσμους, όπως φαίνεται στο μάθημα. Αφήστε τις τιμές των href των συνδέσμων να είναι - /students/1 και /students/2, και το κείμενο των συνδέσμων - 'Student1' και 'Student2' αντίστοιχα. Βεβαιωθείτε ότι όταν κλικάρετε στους συνδέσμους εμφανίζεται η οθόνη με το σφάλμα, που το React Router εμφανίζει από προεπιλογή.

Και τώρα δημιουργήστε τη δική σας ξεχωριστή σελίδα με σφάλμα 404, μπορείτε να εμφανίσετε σε αυτήν ότι θέλετε. Συνδέστε την, όπως φαίνεται στο μάθημα. Και τώρα βεβαιωθείτε ότι όταν κλικάρετε στους συνδέσμους καταλήγετε ακριβώς σε αυτήν.