Kam paredzēta react-router-dom bibliotēka React?

react-router-dom tiek izmantots vienas lapas lietojumprogrammu (SPA) būvēšanai React, nodrošinot klienta puses maršrutizāciju.

Kam tas ir nepieciešams:

• Navigācija: ļauj lietotājiem pāriet starp dažādām "lapām" (komponentiem) bez pilnas lapas atsvaidzināšanas.
• URL pārvaldība: sinhronizē pašreizējo URL adreses joslā ar attēlotu komponentu.
• Dinamisks maršrutizācija: ļauj definēt maršrutus ar parametriem (piemēram, /users/:id), lai ielādētu specifiskus datus.
• Programmatiska navigācija: ļauj novirzīt lietotāju ar kodu (piemēram, pēc veiksmīgas datu saglabāšanas).

Galvenie komponenti:

• BrowserRouter: ietvars lietojumprogrammai, kas izmanto History API URL sinhronizācijai.
• Routes: konteineris maršrutu definēšanai.
• Route: nosaka atbilstību starp URL un komponentu.
• Link: komponents saitei, kas novērš lapas atsvaidzināšanu.
• useNavigate: hook programmatiskai navigācijai.
• useParams: hook URL maršruta parametru iegūšanai.

Piemērs lietošanai:

// 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="/">Sākums</Link> {' '}
        <Link to="/about">Par mums</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Dinamisks maršruts piemērs */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;