# Установка React Router в Redux приложение

На прошлых уроках мы установили основные инструменты для работы с Redux. Часто бывает так, что приложению нужен маршрутизатор для навигации по его web-страницам и наше приложение не станет исключением. Для этого мы установим библиотеку React Router.

Откроем наш проект и наберем в терминале следующую команду:

`npm install react-router-dom`

Забегая немного вперед, скажу, что наше Redux приложение традиционно посвящено продуктам, информация о которых выкладывается некими продавцами. Поэтому сейчас мы немного переделаем главный компонент `App`, а также добавим в приложение функционал для осуществления маршрутизации.

Для начала зайдем в папку `src`, а затем в `app` и создадим здесь файл `root.jsx`. Это будет корень нашего сайта: cлева у нас будет менюшка, а справа - контент (пока же у нас здесь только заголовок):

`function Root() { return ( <div id="main"> <div id="menu"> <nav> <a>Products</a> <a>Sellers</a> </nav> </div> <div id="main_page"> <h2>This is my first Redux app!</h2> <hr></hr> </div> </div> ) } export default Root`

А компонент `App` мы переделаем. Для начала полностью удалим его содержимое. Затем импортируем две функции для роутера и наш корневой компонент `Root`:

`import { createBrowserRouter, RouterProvider } from 'react-router-dom' import Root from './app/root'`

Ниже после импорта создадим роутер, и пропишем первый маршрут, передав ему наш `Root` в качестве отображаемого элемента и, соответсвенно, установив путь в `'/'`. В дальнейшем в `App` мы будем добавлять и другие необходимые маршруты:

`const router = createBrowserRouter([{ path: '/', element: <Root /> }])`

Ниже напишем код функции `App`:

`function App() { return <RouterProvider router={router} /> } export default App`

Все. Запускаем. В следующем разделе мы будем реализовывать компоненты для работы Redux приложения.

Напоследок добавим немного красоты, прописав для этого стили в `index.css`:

`body { font-size: 24px; line-height: 1.5; } nav { display: flex; flex-direction: column; } ul { list-style: none; padding: 0; } h1, h2, h3 { margin: 0; } a { text-decoration: none; color: blue; cursor: pointer; } #main { display: flex; margin: 20px; } #menu { margin-right: 50px; padding-top: 50px; padding-right: 50px; border-right: 2px solid lightgray; font-weight: bold; }`

Добавьте React Router в ваше приложение.

Пусть ваше приложение будет касаться студентов, информацию о которых будут выкладывать преподаватели. Учитывая это, создайте корневой компонент `Root`. Переделайте компонент `App` как описано в уроке.

← →
↑