Waarvoor wordt de bibliotheek react-router-dom gebruikt in React?

react-router-dom wordt gebruikt om single-page applicaties (SPA) in React te bouwen, door client-side routing te bieden.

Waarvoor is het nodig?

• Navigatie: Maakt het mogelijk voor gebruikers om tussen verschillende "pagina's" (componenten) te navigeren zonder de pagina volledig te herladen.
• URL-beheer: Synchroniseert de huidige URL in de adresbalk van de browser met het weergegeven component.
• Dynamisch routing: Biedt de mogelijkheid om routes met parameters te definiëren (bijvoorbeeld /users/:id) om specifieke gegevens te laden.
• Programma navigatie: Staat toe dat je de gebruiker via code kunt doorverwijzen (bijvoorbeeld na het succesvol opslaan van gegevens).

Belangrijkste componenten:

• BrowserRouter: Omhulsels voor de applicatie die de History API gebruikt om URL te synchroniseren.
• Routes: Container voor het definiëren van routes.
• Route: Bepaalt de overeenkomst tussen URL en component.
• Link: Component voor het maken van links die een pagina-herlaad voorkomen.
• useNavigate: Hook voor programmatische navigatie.
• useParams: Hook voor het extraheren van route-parameters uit de URL.

Voorbeeld van gebruik:

// 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="/">Home</Link> {' '}
        <Link to="/about">Over ons</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Voorbeeld van dynamische route */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;