React Router'da Rotalar

Rotalar (Routes), React Router üzerine kurulu bir uygulamanın en önemli parçasıdır. Önceki dersteki bir kod parçasını inceleyelim:

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

İşte, bir yönlendirici oluştururken fonksiyona ilettiğimiz path ve element özellikleri, aslında Route nesnesinin özellikleridir. Aslında, bu nesnenin birçok özelliği vardır, bunları resmi dokümantasyonda bulabilirsiniz. İlerleyen zamanlarda, bunlardan bazıları işimize yarayacak:

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>;
}

Alternatif JSX stilini kullanabilir ve özellikleri Route bileşeni için prop'lar olarak yazabilirdik, o zaman kod parçamız şöyle görünürdü:

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

Ve, elbette, import'a birkaç satır daha eklememiz gerekirdi:

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

Derste verilen her iki stil de eşdeğerdir. İlerleyen kısımlarda biz ilk varyanta bağlı kalacağız.

Önceki derslerin ödevlerinde oluşturduğunuz uygulamayı alın. Yönlendirici oluşturmak için olan kodu (eskisini şimdilik yorum satırı yapın), derste verilen alternatif JSX sözdizimini kullanarak yeniden yazmayı deneyin. Uygulamanın çalıştığından emin olun.

Tüm eski kodu yerine geri koyun, yeni kodu ise kaldırın. Uygulamanın çalıştığından emin olun.