A React Router Outlet egy speciális komponens, ami helyőrzőként működik a szülő útvonalban, és oda rendereli a gyermek útvonalak tartalmát.
Miért van rá szükség?
Ha van egy layout (pl. fejléc, lábléc, main), és ezekben dinamikusan változó tartalom (pl. Home, About, Contact), akkor az Outlet jelzi, hová kerüljenek a gyerek route-ok, pl. a main-en belül.
Hogyan működik?
A szülő útvonal eleme tartalmazza az Outlet-et, pl. a main. A gyerek útvonalak tartalma az Outlet helyére kerül: about, home, mentorok, kurzusok stb.
Tehát a header az mindig ugyanaz marad ebben a példában, de a main tartalma változni fog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import { BrowserRouter, Routes, Route, Outlet, Link } from "react-router-dom"; function Layout() { return ( <div> <header> <nav> <Link to="/">Home</Link> | <Link to="/about">About</Link> </nav> </header> <main> <Outlet /> {/* Ide jönnek a gyerek route-ok */} </main> </div> ); } function Home() { return <h2>Kezdőlap</h2>; } function About() { return <h2>Rólunk</h2>; } export default function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="about" element={<About />} /> </Route> </Routes> </BrowserRouter> ); } |
További előnye, hogy a gyermek elemek egymásba ágyazhatóak:
Készítsünk egy új komponenst:
|
1 2 3 |
function HomeChild() { return <h3>Home gyerek oldal</h3>; } |
router rész kibővítve:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> {/* Home aloldalak */} <Route path="home"> <Route path="child" element={<HomeChild />} /> </Route> <Route path="about" element={<About />} /> </Route> </Routes> </BrowserRouter> |