Na čo sa v React používa knižnica react-router-dom?

react-router-dom se uporablja za gradnjo enostranskih aplikacij (SPA) v Reactu, zagotavlja usmerjanje na odjemalcu.

Za kaj je to potrebno?

• Navigacija: Omogoča uporabnikom prehajanje med različnimi "stranmi" (komponentami) brez popolnega osveževanja strani.
• Upravljanje URL-jev: Sinhronizira trenutni URL v naslovni vrstici brskalnika z prikazanim komponentom.
• Dinamično usmerjanje: Dovoli definiranje poti z parametri (npr., /users/:id) za nalaganje specifičnih podatkov.
• Programsko usmerjanje: Omogoča preusmerjanje uporabnika s kodo (npr., po uspešnem shranjevanju podatkov).

Glavne komponente:

• BrowserRouter: Ovijalec za aplikacijo, ki uporablja API History za sinhronizacijo URL.
• Routes: Vsebnik za definiranje poti.
• Route: Določa ujemanje med URL-jem in komponento.
• Link: Komponenta za ustvarjanje povezav, ki preprečujejo ponovno nalaganje strani.
• useNavigate: Hook za programsko navigacijo.
• useParams: Hook za pridobivanje parametrov poti iz URL.

Primer uporabe:

// 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="/">Domov</Link> {' '}
        <Link to="/about">O nas</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Primer dinamične poti */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;