Zašto se u React-u koristi biblioteka react-router-dom?

react-router-dom se koristi za pravljenje jednostranica (SPA) u React-u, obezbeđujući klijentsko rutiranje.

Čemu služi?

• Navigacija: Omogućava korisnicima da prelaze između različitih "stranica" (komponenti) bez potpunog osvežavanja stranice.
• Upravljanje URL-om: Sinhronizuje trenutni URL u adresnoj traci pretraživača sa prikazanim komponentom.
• Dinamičko rutiranje: Omogućava definisanje ruta sa parametrima (npr., /users/:id) za učitavanje specifičnih podataka.
• Programatska navigacija: Omogućava preusmeravanje korisnika putem koda (npr., nakon uspešnog čuvanja podataka).

Glavni sastavni delovi:

• BrowserRouter: Omotač za aplikaciju koji koristi API History za sinhronizaciju URL-a.
• Routes: Kontejner za definisanje ruta.
• Route: Određuje podudaranje između URL-a i komponente.
• Link: Komponenta za kreiranje linkova koji sprečavaju ponovno učitavanje stranice.
• useNavigate: Hook za programsku navigaciju.
• useParams: Hook za izvlačenje parametara rute iz URL-a.

Primer upotrebe:

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Početna</Link> {' '}
        <Link to="/about">O nama</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Primer dinamičke rute */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;