Добавяне на рутер в 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 след редовете с импорт. Ще направим това така, че на главната страница да се показва div с надпис '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!'.