Na co se v Reactu používá knihovna react-router-dom?

react-router-dom se používá k vytváření jednostránkových aplikací (SPA) v Reactu a zajišťuje směrování na straně klienta.

Na co je to potřeba?

• Navigace: Umožňuje uživatelům přecházet mezi různými "stránkami" (komponenty) bez úplného načítání stránky.
• Správa URL: Synchronizuje aktuální URL v adresním řádku prohlížeče s zobrazovanou komponentou.
• Dynamické směrování: Umožňuje definovat trasy s parametry (například /users/:id) pro načítání specifických dat.
• Programové směrování: Umožňuje přesměrování uživatele pomocí kódu (například po úspěšném uložení dat).

Hlavní komponenty:

• BrowserRouter: Obal pro aplikaci, který používá API History k synchronizaci URL.
• Routes: Kontejner pro definování tras.
• Route: Určuje shodu mezi URL a komponentou.
• Link: Komponenta pro vytváření odkazů, které zabraňují načítání stránky znovu.
• useNavigate: Hook pro programové směrování.
• useParams: Hook pro extrakci parametrů trasy z URL.

Příklad použití:

// 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="/">Hlavní stránka</Link> {' '}
        <Link to="/about">O nás</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Příklad dynamické trasy */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;