magdo
99 lines
3.4 KiB
TeX
99 lines
3.4 KiB
TeX
\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}
|