\section{Navigáció}

\begin{frame}{Mit jelent a kliensoldali navigáció?}
  \begin{block}{Hagyományos vs.\ SPA navigáció}
    Hagyományos weboldalon minden oldalváltáskor a böngésző \textbf{új HTTP kérést} küld, és teljesen újratölti az oldalt.
    SPA (Single Page Application) esetén az oldal egyszer töltődik be, a navigáció pedig JavaScript-tel történik,
    ezért gyorsabb és folyamatosabb élményt ad.
  \end{block}
  \vspace{0.5em}
  A React Router a legelterjedtebb könyvtár erre a feladatra React alkalmazásokban.
\end{frame}

\begin{frame}{React Router --- hogyan működik?}
  \begin{itemize}
    \item A \texttt{BrowserRouter} figyeli a böngésző URL-jét.
    \item A \texttt{Routes} és \texttt{Route} elemek URL mintákhoz komponenseket rendelnek.
    \item A \texttt{Link} URL-t vált teljes oldalfrissítés nélkül.
    \item A React újrarendereli a megfelelő oldalkomponenst az aktuális útvonal alapján.
  \end{itemize}
\end{frame}

\begin{frame}[fragile]{React Router példa kód 1/2}
\begin{verbatim}
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

    function App() {
    return (
        <BrowserRouter>
        <nav>
            <Link to="/">Fooldal</Link>
            <Link to="/termekek">Termekek</Link>
        </nav>
\end{verbatim}
\end{frame}

\begin{frame}[fragile]{React Router példa kód 2/2}
\begin{verbatim}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/termekek" element={<Products />} />
        <Route path="/termekek/:id" element={<ProductDetails />} />
      </Routes>
    </BrowserRouter>
  );
}
\end{verbatim}
\end{frame}

\begin{frame}{Dinamikus útvonalak (React Router)}
  \begin{itemize}
    \item Paraméteres route példa: \texttt{/termekek/:id}
    \item Ha az URL \texttt{/termekek/42}, akkor a \texttt{useParams()} eredménye: \texttt{\{ id: "42" \}}
    \item Tipikusan ilyen paraméterrel kérünk le részletes adatot API-ból.
  \end{itemize}
\end{frame}

\begin{frame}{Mappa routing (file-system routing) --- mi ez?}
  \begin{block}{Alapelv}
    Mappaalapú routingnál az útvonalakat nem külön \texttt{Routes} konfigurációban írjuk,
    hanem a mappastruktúra \textbf{automatikusan} meghatározza őket.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item Ez főleg Next.js-ben elterjedt (App Router).
    \item Az \texttt{app/} mappában minden \texttt{page.tsx} egy útvonalat jelent.
    \item Dinamikus route mappanévben: \texttt{[id]}.
  \end{itemize}
\end{frame}

\begin{frame}[fragile]{Mappa routing példa (Next.js App Router)}
\begin{verbatim}
app/
  page.tsx                -> /
  kapcsolat/
    page.tsx              -> /kapcsolat
  termekek/
    page.tsx              -> /termekek
    [id]/
      page.tsx            -> /termekek/:id
\end{verbatim}
\end{frame}

\begin{frame}[fragile]{Dinamikus mappa route komponens példa}
\begin{verbatim}
// app/termekek/[id]/page.tsx
export default function ProductPage({ params }) {
  return <h2>Termek azonosito: {params.id}</h2>;
}
\end{verbatim}
\end{frame}

\begin{frame}{React Router vs. mappa routing}
  \begin{itemize}
    \item \textbf{React Router:} explicit útvonal definíció a kódban (rugalmas, kontrollált).
    \item \textbf{Mappa routing:} mappaszerkezetből automatikus route (gyors indulás, kevesebb konfiguráció).
    \item Kezdőknek mindkettőt érdemes ismerni: React Router SPA-hoz, mappa routing Next.js projektekhez.
  \end{itemize}
\end{frame}