Kam skirta react-router-dom biblioteka React'e?

react-router-dom naudojamas kurti vieno puslapio programas (SPA) React'e, užtikrinant klientų pusės maršrutizaciją.

Kam ji reikalinga:

• Navigacija: leidžia vartotojams pereiti tarp skirtingų "puslapių" (komponentų) be pilno puslapio perkrovimo.
• URL valdymas: sinchronizuoja esamą URL adreso juostoje su rodomu komponentu.
• Dinaminė maršrutizacija: leidžia nustatyti maršrutus su parametrais (pvz., /users/:id), kad būtų galima įkelti specifinius duomenis.
• Programinė navigacija: leidžia nukreipti vartotoją naudojant kodą (pvz., po sėkmingo duomenų išsaugojimo).

Pagrindiniai komponentai:

• BrowserRouter: apvalkalas programai, naudojantis History API URL sinchronizacijai.
• Routes: konteineris maršrutų apibrėžimui.
• Route: apibrėžia atitikimą tarp URL ir komponento.
• Link: komponentas nuorodų kūrimui, kuris neperkrauna puslapio.
• useNavigate: hook'as programinei navigacijai.
• useParams: hook'as URL maršruto parametrų išgavimui.

Pavyzdys naudojimo:

// 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="/">Pradžia</Link> {' '}
        <Link to="/about">Apie mus</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Pavyzdinis dinaminis maršrutas */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;