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

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

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

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

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

main.jsximport './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>

  </React.StrictMode>
);

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

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

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

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

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

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

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

main.jsximport './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!'.