# Маршруты в React Router

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

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

Так вот, свойства объекта `path` и `element`, которые мы передавали в функцию при создании роутера, и есть свойства объекта Route. На самом деле, объект 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 синтаксис, приведенный в уроке. Убедитесь, что приложение работает.

Верните на место весь старый код, а новый уберите. Убедитесь, что приложение работает.

← →
↑