Додавање рутера у 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!'.