Dodavanje rutera u React Router

Nakon što smo se malo upoznali sa ruterima, možemo da dodamo jedan u našu aplikaciju.

Ali prvo, moramo da malo počistimo šablon naše aplikacije koji smo kreirali u prethodnim lekcijama. Konkretnije, bavićemo se folderom src. Izbacite iz njega folder assets, fajlove App.css, App.jsx. Ukratko, trebalo bi da vam ostanu samo main.jsx i index.css.

Otvorite index.css i potpuno ga očistite. Neka bude prazan.

Sada ćemo se pozabaviti našim glavnim fajlom main.jsx. U njemu ćemo imati ovakav kod:

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

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

  </React.StrictMode>
);

A sada možemo da dodamo ruter. Koristićemo BrowserRouter, pošto se on najčešće koristi u veb aplikacijama. Ne zaboravimo na savremenu sintaksu. Dodajmo liniju za import:

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

Zatim, kreirajmo konstantu router i kreirajmo naš BrowserRouter nakon linija za import. Uradimo to tako da se na glavnoj stranici prikazuje div sa natpisom 'Hello Router!'. Da bismo to uradili, definisaćemo putanju do glavne stranice i element koji će se prikazati:

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

Treba nam još da dodamo komponentu RouterProvider i prosledimo joj kreirani ruter iznad. Ona prihvata sve ruter objekte, renderuje našu aplikaciju i povezuje ostale API-je:

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

Kompletan kod će izgledati ovako:

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>
);

Sačuvajmo promene. Čestitam! Naša aplikacija više ne prijavljuje greške. Sada, ako je pokrenemo, na glavnoj stranici u brauzeru ćemo videti 'Hello Router!'.