Milleks kasutatakse react-router-dom raamatukogu Reactis?

react-router-dom kasutatakse ühe lehe rakenduste (SPA) loomisel Reactis, pakkudes kliendi poolel marsruutimist.

Milleks see on vajalik:

• Navigatsioon: võimaldab kasutajatel liikuda erinevate "lehtede" (komponentide) vahel ilma kogu lehte uuesti laadimata.
• URL-i haldamine: sünkroniseerib praeguse URL-i brauseri aadressiribal ja kuvatava komponendi vahel.
• Dünaamiline marsruutimine: võimaldab määrata marsruute parameetritega (näiteks /users/:id), et laadida spetsiifilisi andmeid.
• Programmaatiline navigatsioon: võimaldab kasutajat suunata koodi abil (näiteks pärast andmete salvestamist).

Peamised komponendid:

• BrowserRouter: rakenduse kate, mis kasutab History API URL-i sünkroniseerimiseks.
• Routes: konteiner marsruutide määratlemiseks.
• Route: määrab URL-i ja komponendi vastavuse.
• Link: komponend lingi loomiseks, mis takistab lehe uuesti laadimist.
• useNavigate: hook programmaatiliseks navigatsiooniks.
• useParams: hook URL-i marsruudi parameetrite saamiseks.

Näide kasutamisest:

// 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="/">Avaleht</Link> {' '}
        <Link to="/about">Meist</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Näidis dünaamiline marsruut */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;