React Router'da Not Found Hatasını İşleme

Bir uygulama oluştururken, ilerleyen kullanım sürecinde çeşitli hataların ortaya çıkmasına da dikkat etmek gerekir. Bu derste, 'Not Found' hatasıyla nasıl çalışacağımızı öğreneceğiz. Bu hata, örneğin kullanıcı var olmayan bir sayfaya giden bir bağlantıya tıkladığında ortaya çıkabilir.

İlk olarak, önceki derslerde yaptığımız uygulamamızı açalım ve Root bileşeninin işaretlemesini değiştirelim. Artık uygulama başlatıldığında, bize iki üründen oluşan bir liste görüntülenecek:

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

export default Root;

index.css dosyasına biraz stil ekleyelim:

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

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

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

Şimdi bağlantılara tıklayın. Ürünlerimiz için herhangi bir sayfa düzenimiz olmadığından, bağlantılar bizi sadece '404 Not Found' hatası ekranına götürecek ve React Router'ın bizim için varsayılan olarak görüntülediğinden daha güzel ve ilginç bir şey bulabileceğimiz konusunda bizi hafifçe azarlayacak.

Haydi, 404 hatası durumunda görüntülenecek kendi sayfamızı yapalım. Bunun için src klasöründe error-page-404.jsx dosyasını oluşturalım.

ErrorPage404 React bileşeninin içinde, konsola yazdıracağımız hatayı yakalamak için useRouteError kancasını kullanacağız:

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

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

}

export default ErrorPage404;

Daha sonra, ErrorPage404 bileşeninin işaretlemesinde, hatayı bildiren birkaç başlık görüntüleyeceğiz ve error nesnesinin statusText ve data gibi özelliklerini göstereceğiz (error nesnesini ve özelliklerini konsolu açıp uygulamamızdaki bağlantılara tıkladığınızda da görebilirsiniz).

return (
	<div>
		<h1>Merhaba! Bu bir Hata Sayfası</h1>
		<h2>404 Not Found Hatası</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

main.jsx dosyasını açıp ErrorPage404 için bir import satırı daha eklemeyi unutmayın:

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

Ayrıca Router nesnesine bir errorElement özelliği daha ekleyin - bu öğe, bu rota üzerinde bir hata oluştuğunda görüntülenir. Hata öğesinin değeri, ErrorPage404 bileşenimiz olacak:

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

Önceki dersteki görevde oluşturduğunuz uygulamayı alın. Ana sayfaya, derste gösterildiği gibi birkaç bağlantıdan oluşan bir liste ekleyin. Bağlantıların href değerleri /students/1 ve /students/2, bağlantı metinleri ise sırasıyla 'Student1' ve 'Student2' olsun. Bağlantılara tıkladığınızda, React Router'ın varsayılan olarak gösterdiği hata ekranının çıktığından emin olun.

Şimdi kendi 404 hata sayfanızı oluşturun, istediğiniz içeriği görüntüleyebilirsiniz. Bunu derste gösterildiği gibi bağlayın. Artık bağlantılara tıkladığınızda tam olarak bu sayfaya girdiğinizden emin olun.