მარშრუტები React Router-ში

მარშრუტები (Routes) არის React Router-ზე აგებული აპლიკაციის ყველაზე მნიშვნელოვანი ნაწილი. განვიხილოთ წინა გაკვეთილიდან აღებული კოდის ნაწყვეტი:

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

მაშ, ობიექტის path და element თვისებები, რომლებსაც ვაწვდიდით ფუნქციას როუტერის შექმნისას, სწორედ Route ობიექტის თვისებებია. სინამდვილეში, ამ ობიექტს უამრავი თვისება აქვს, მათი ნახვა შესაძლებელია ოფიციალურ დოკუმენტაციაში. მომავალში, ზოგიერთი მათგანი გამოგვადგება:

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

შესაძლებელი იყო ალტერნატიული JSX სტილის გამოყენება და თვისებების დაწერა Route კომპონენტისთვის პროფებად, მაშინ ჩვენი კოდის ნაწყვეტი ასე გამოიყურებოდა:

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

და, რა თქმა უნდა, იმპორტში კიდევ რამდენიმე ხაზის დამატება დაგვჭირდებოდა:

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

გაკვეთილში მოყვანილი ორივე სტილი თანაბრად მართებულია. ჩვენ შემდგომში პირველ ვარიანტს ვიცავთ.

აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით წინა გაკვეთილების დავალებებში. სცადეთ გადაწეროთ როუტერის შექმნის კოდის ნაწყვეტი (ძველი კოდი ჯერ დააკომენტარეთ), გაკვეთილში მოცემული ალტერნატიული JSX სინტაქსის გამოყენებით. დარწმუნდით, რომ აპლიკაცია მუშაობს.

დააბრუნეთ ადგილზე მთელი ძველი კოდი, ახალი კი ამოიღეთ. დარწმუნდით, რომ აპლიკაცია მუშაობს.