Маршрути в React Router

Маршрутите (Routes) са най-важната част на приложение с React Router. Нека разгледаме част от кода от предишния урок:

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

И така, свойствата на обекта path и element, които предавахме на функцията при създаване на рутера, са свойства на обекта Route. Всъщност, този обект има множество свойства, те могат да бъдат намерени в официалната документация. В бъдеще, някои от тях ще ни бъдат полезни:

jsxinterface 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, тогава нашата част от кода ще изглежда така:

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

И, разбира се, ще трябва да се добавят още няколко реда в импорта:

main.jsximport {
  createRoutesFromElements,
  createBrowserRouter,
  RouterProvider,
  Route,
} from 'react-router-dom';

И двата стила, показани в урока, са равностойни. Ние в бъдеще ще се придържаме към първия вариант.