# Добавление роутера в React Router

Немного ознакомившись с роутерами, мы можем добавить один из них в приложение.

Но для начала нам нужно немного почистить шаблон нашего приложения, который мы создали на прошлых занятиях. А конкретнее - займемся папочкой `src`. Выбросьте из нее папку `assets`, файлы `App.css`, `App.jsx`. В общем, у вас останутся в ней только `main.jsx` и `index.css`.

Окройте `index.css` и полностью его очистите. Пусть он будет пустым.

Теперь займемся нашим главным файлом `main.jsx`. В нем у нас будет такой код:

`import './index.css' import React from 'react'; import ReactDOM from 'react-dom/client'; ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> </React.StrictMode> );`

А теперь мы можем добавить роутер. Мы используем `BrowserRouter`, поскольку он чаще всего используется в веб-приложениях. Не забудем и про современный синтаксис. Добавим строчку импорта:

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

Затем, заведем константу `router` и создадим наш `BrowserRouter` после строчек с импортом. Сделаем это так, чтобы на главной странице у нас отображался див с надписью `'Hello Router!'`. Для этого пропишем путь к главной странице и элемент, который будем отображать:

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

Нам еще нужно добавить компонент `RouterProvider` и вписать созданный нами выше роутер. Он принимает все объекты роутера, рендерит наше приложение и подключает другие API:

`ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> );`

Полный код будет выглядеть так:

`import './index.css' import React from 'react'; import ReactDOM from 'react-dom/client'; import { createBrowserRouter, RouterProvider, } from 'react-router-dom'; const router = createBrowserRouter([ { path: '/', element: <div>Hello world!</div>, }, ]); ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> );`

Сохраним изменения. Поздравляю! Наше с вами приложение больше не ругается ;). Теперь, если мы его запустим, то на главной странице в браузере мы увидим `'Hello Router!'`.

Используя приведенный материал, сделайте так, чтобы на главной странице вашего приложения, которое вы создали в домашних заданиях к прошлым урокам, у вас отображался параграф с текстом `'I'm number one in React!'`.

← →
↑