Reitit React Routerissa

Reitit (Routes) ovat React Router -sovelluksen tärkein osa. Tarkastellaan palasta koodia edelliseltä oppitunnilta:

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

No, ominaisuudet path ja element, jotka annoimme funktiolle reitittimen luomisen yhteydessä, ovat Route-objektin ominaisuuksia. Itse asiassa, tällä objektilla on lukuisia ominaisuuksia, ne voi löytää virallisesta dokumentaatiosta. Tulevaisuudessa tarvitsemme joitain niistä:

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

Voisimme käyttää vaihtoehtoista JSX-tyyliä ja kirjoittaa ominaisuudet propseina Route-komponentille, jolloin koodinpalanen näyttäisi tältä:

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

Ja tietysti olisi pitänyt lisätä vielä pari riviä importtaukseen:

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

Molemmat oppitunnissa esitetyt tyylit ovat yhtä arvokkaita. Jatkossa pidämme kiinni ensimmäisestä vaihtoehdosta.

Ota sovellus, jonka loit tehtävissä aiempien oppituntien yhteydessä. Yritä kirjoittaa uudelleen se koodinpala reitittimen luomiseksi (vanha koodi kommentoituna toistaiseksi), käyttäen vaihtoehtoista JSX-syntaksia, joka on esitetty oppitunnissa. Varmista, että sovellus toimii.

Palauta vanha koodi paikoilleen, ja poista uusi. Varmista, että sovellus toimii.