React routing

A React-ben az oldalak közötti navigációhoz leggyakrabban a React Router csomagot használjuk, ezt is telepíteni, majd importálni kell. A React Router megkönnyíti az oldalak közötti hivatkozásokat és a modern, egylapos alkalmazások (SPA-k) fejlesztését. Ugyanakkor a Reactben nincsenek hagyományos értelemben vett oldalak, mint sima html-ben, itt komponensek vannak, és ezekre tudunk hivatkozni!

telepítés: npm install react-router-dom

importálás: import { BrowserRouter, Routes, Route, Link } from ‘react-router-dom’;

A BrowserRouter komponens fogja tartalmazni a teljes alkalmazást.
A Link komponens biztosítja az oldalak közötti navigációra anélkül, hogy az weblap újratöltődne.
NavLink komponens: a Link speciális változata, amely támogatja az aktív stílusokat vagy osztályokat a jelenleg aktív útvonalak kiemelésére
A Routes belsejében definiáljuk az útvonalakat (Route), és megadjuk, hogy melyik komponens jelenjen meg az adott útvonalon.

Nézzünk meg egy példát, egy bemutatkozó weblapot!

Hogyan lehet egy ‘oldalon’ belüli komponensre hivatkozni? Készítettem egy Gyik nevű komponenst, ami az App.jsx-ben található, ugyanitt lesz a navigációnk is.
Hogyan lehet egy másik jsx-ben található komponensre hivatkozni?
Hogyan lehet könyvjelzőt használni?
Hogyan lehet külső hivatkozást új lapon megnyitni?

Az App.jsx fájl tartalmazza a navigációt

Bemutatkozas.jsx és a NappaliButor.jsx 1-1 komonenst tartalmaz, a példa kedvéért

A KonyhaButor.jsx fájlban van 2db könyvjelzőnk, és egy Szek komponensünk is!

App.jsx

Importáljuk a komponenseket, illetve a navigációhoz szükséges React modulokat is. A navigációért a BrowserRouter felel. A konkrét komponensek elérési útját és megjelenítendő elemeit a Routes – Route tartalmazza. A linkek a path-ben magadott azonosítókra tudnak hivatkozni.

Külső hivatkozásnál ugyanúgy az <a> taget használjuk, szokásos target attributummal. A rel= “noopener” használata arra utasítja a böngészőt, hogy nyisson meg egy hivatkozást egy új lapon anélkül, hogy hozzáférést biztosítana a hivatkozást megnyitó weboldalhoz. A rel=”noreferer” funkciójában hasonló a noopener-hez. Megakadályozza, hogy a böngésző elküldje a hivatkozó weboldal címét, amikor egy másik oldalra lép. A linkelt oldal tulajdonosa nem kap információt arról, hogy a látogató milyen weboldalról érkezett.

<Routes>
  <Route path="/gyik" element={<Gyik />} />
  <Route path="/" element={<Bemutatkozas />} />
  <Route path="/konyha" element={<KonyhaButor />} />
  <Route path="/nappali" element={<NappaliButor />} />
  <Route path="/bemutatkozas" element={<Bemutatkozas />} />
  <Route path="*" element={<NotFound />} />
  <Route path="/szek" element={<Szek />} /> 
</Routes>

</Routes>

Az útvonalak: a React app gyökere a / Én ezt most hozzárendeltem a Bemutatkozas.jsx-ben található Bemutatkozas komponenshez. Ahogy látjuk, ez a komponens elérhető lesz a gyökérből és a /bemutatkozas url-ről is!
A KonyhaButor.jsx fájlból a KonyhaButor komponensre hivatkozok a /konyha útvonallal. (Ez a default export, de van benne egy Szek komponens is, azt is exportáltam, és nyilván importálni kell az App.jsx-ben!) Ezen belül a könyvjelzők ugyanúgy megadhatók, mint html-ben: /konyha#konyvjelzo illetve /konyha#konyvjelzo2
Külső oldalnak nem szükséges Route, simán <a href=””> segítségével tudunk rá hivatkozni.

import { useState } from "react";
import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

import KonyhaButor from "./Konyhabutor"; //default export
import { Szek } from "./Konyhabutor"; //sima export
import NappaliButor from "./NappaliButor";
import Bemutatkozas from "./Bemutatkozas";


//404-es hiba
function NotFound() {
  return <h1>404 - Az oldal nem található</h1>;
}

function Gyik() {
  return (
    <div>
      <h1>GyIK - Gyakori kérdések</h1>
      <p>Szállítási módok</p>
      <p>Garanciális ügyintézés</p>
    </div>
  );
}

function App() {
  return (
    <>
      <BrowserRouter>
        <div>
          {/* Navigációs sáv */}
          <nav>
            <ul>
              <li>
                <Link to="/gyik">Gyakori kérdések</Link>
              </li>
              <li>
                <Link to="/konyha">Konyhabútor</Link>
              </li>
              <li>
                <Link to="/konyha#konyvjelzo">
                  1. könyvjelző
                </Link>
              </li>
              <li>
                <Link to="/konyha#konyvjelzo2">2. könyvjelző</Link>
              </li>
             <li>
                <NavLink to="szek">Konyhabútor székek</NavLink>
              </li>
              <li>
                <Link to="/nappali">Nappalibútor</Link>
              </li>
              <li>
                <Link to="/bemutatkozas">Bemutatkozás</Link>
              </li>
              <li>
                {/* Külső hivatkozás */}
                <a href="https://informatikaora.hu/"
                  target="_blank" rel="noopener noreferrer"> Weblapom </a>
              </li>
            </ul>
          </nav>

          {/* Oldalak */}         
          <Routes>
            <Route path="/gyik" element={<Gyik />} />
            <Route path="/" element={<Bemutatkozas />} />
            <Route path="/konyha" element={<KonyhaButor />} />
            <Route path="/szek" element={<Szek />} />    
            <Route path="/nappali" element={<NappaliButor />} />
            <Route path="/bemutatkozas" element={<Bemutatkozas />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
      </BrowserRouter>
    </>
  );
}

export default App;

import { useState } from "react";

import React from "react";

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

import KonyhaButor from "./Konyhabutor"; //default export

import { Szek } from "./Konyhabutor"; //sima export

import NappaliButor from "./NappaliButor";

import Bemutatkozas from "./Bemutatkozas";

//404-es hiba

function NotFound() {

return <h1>404 - Az oldal nem található</h1>;

}

function Gyik() {

return (

<div>

<h1>GyIK - Gyakori kérdések</h1>

<p>Szállítási módok</p>

<p>Garanciális ügyintézés</p>

</div>

);

}

function App() {

return (

<div>

{/* Navigációs sáv */}

<nav>

<ul>

<li>

<Link to="/gyik">Gyakori kérdések</Link>

</li>

<li>

<Link to="/konyha">Konyhabútor</Link>

</li>

<li>

1. könyvjelző

</Link>

</li>

<li>

<Link to="/konyha#konyvjelzo2">2. könyvjelző</Link>

</li>

<li>

<NavLink to="szek">Konyhabútor székek</NavLink>

</li>

<li>

<Link to="/nappali">Nappalibútor</Link>

</li>

<li>

<Link to="/bemutatkozas">Bemutatkozás</Link>

</li>

<li>

{/* Külső hivatkozás */}

<a href="https://informatikaora.hu/"

target="_blank" rel="noopener noreferrer"> Weblapom </a>

</li>

</ul>

</nav>

{/* Oldalak */}

</Routes>

</div>

</BrowserRouter>

</>

);

}

export default App;

Bemutatkozas.jsx és Nappalibutor.jsx sima egyszerű div-et tartalmaz, itt csak a Bemutatkozas.jsx tartalma lesz fent:

import React from "react";

const Bemutatkozas = () => {
    return (
        <div>
            <h1>Bemutatkozás</h1>
            <p>Üdvözlünk a bútorboltunkban!</p>
        </div>
    );
};

export default Bemutatkozas;

import React from "react";

const Bemutatkozas = () => {

return (

<div>

<h1>Bemutatkozás</h1>

<p>Üdvözlünk a bútorboltunkban!</p>

</div>

);

};

export default Bemutatkozas;

NappaliButorok.jsx Ez az oldal tartalmaz 2db könyvjelzőt. (ugyanúgy div + id, mint html-ben)

A React nem ugrik automatikusan a megadott könyvjelzőkhöz! Ehhez importálni kell a react-router-dom useLocation komponensét! Könyvjelzőnél tulajdonképpen a #-et keressük meg. A useLocation hook segítségével hozzáférhetsz az aktuális útvonal hash részéhez. A location.hash értéke például #konyvjelzo vagy #konyvjelzo2 lesz, ha a linkre kattintunk az App.jsx-ben.

A JavaScript scrollIntoView metódust használjuk, hogy a megfelelő elemhez görgessünk. A behavior: „smooth” opció lehetővé teszi az animált görgetést. Lehet „auto” is, ebben az esetben nem görget, hanem egyből a könyvjelzőhöz ‘ugrik’, mint sima html esetén.

A useEffect figyeli a location.hash változását, és amikor változik, azonosítja az id alapján az elemet. A scrollIntoView block paraméterével megadható, a könyvjelzős tartalom pozíciója:

„start”: Az elem az oldal tetején helyezkedik el
„center”: Az elem az oldal közepén lesz látható
„end”: Az elem az oldal alján helyezkedik el
„nearest”: A legközelebbi pozíciót választja, hogy az elem látható legyen. */

import React from "react";
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
const KonyhaButor = () => {
  const location = useLocation();

  useEffect(() => {
    if (location.hash) {
      const element = document.getElementById(location.hash.substring(1));
      if (element) {
        element.scrollIntoView({ behavior: "smooth", block:"center" });        
      }
    }
  }, [location]);
  return (
    <>
      <div>
        <h1>Konyhabútor</h1>
        <p>Itt találhatók a konyhabútorok információi.</p>
      </div>    
      
      <div id="konyvjelzo">Ez a könyvjelző 1 célja! </div> 
      <div id="konyvjelzo2">Ez a könyvjelző 2 célja!</div>
    </>
  );
};

export default KonyhaButor;

import React from "react";

import { useEffect } from "react";

import { useLocation } from "react-router-dom";

const KonyhaButor = () => {

const location = useLocation();

useEffect(() => {

if (location.hash) {

const element = document.getElementById(location.hash.substring(1));

if (element) {

element.scrollIntoView({ behavior: "smooth", block:"center" });

}

}, [location]);

return (

<div>

<h1>Konyhabútor</h1>

<p>Itt találhatók a konyhabútorok információi.</p>

</div>

<div id="konyvjelzo">Ez a könyvjelző 1 célja! </div>

<div id="konyvjelzo2">Ez a könyvjelző 2 célja!</div>

</>

);

};

export default KonyhaButor;

A későbbiekben szó lesz még a védett útvonalakról, amik csak feltétel teljesülése esetén tekinthetők meg.

2. példa: Bamutatkozó oldal sablon

Ebben a feladatban megnézzük:

Statikus útvonalak: /, /about, /contact
Dinamikus útvonal: /user/:id
404-es hiba oldal: path=”*”
NavLink aktív stílus: .active osztály
Programozott navigáció: useNavigate a Home oldalon

Visual Studio Code-ban nyiss egy új terminált!
npm create vite @latest
adni kell neki egy nevet, kiválasztani a React-ot, és a JavaScriptet.
Ha kész a projekt akkor npm i és npm i react-router-dom
Szokásos npm run dev paranccsal indítható.

About.jsx és Contact.jsx
Statikus ‘oldalak’. Egyszerű komponensek, amelyek külön útvonalon jelennek meg. Ezek gyakorlatilag sablon komponensek., nincs bennük semmi extra.

{/* About.jsx tartalma */}
import React from 'react';
export default function About() {
  return <h1>About Us</h1>;
}
{/* Contact.jsx tartalma */}
import React from 'react';
function Contact() {
  return <h1>Contact Page</h1>;
}

export default Contact;

{/* About.jsx tartalma */}

import React from 'react';

export default function About() {

return <h1>About Us</h1>;

}

{/* Contact.jsx tartalma */}

import React from 'react';

function Contact() {

return <h1>Contact Page</h1>;

}

export default Contact;

App.jsx

Ez az alkalmazás belépési pontja. Itt csomagoljuk be a komponenseket a BrowserRouter-be, hogy az egész alkalmazásban elérhető legyen a routing. A BrowserRouter biztosítja az útvonalkezelést a React Router számára. Tartalmazza az útvonalak definícióját (Routes és Route). Itt határozzuk meg, melyik URL-hez melyik oldal (komponens) tartozik, és itt kezeljük a 404-es oldalt is.

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
import Users from './components/Users';

function App() {
  return (
    
      <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />        
        {/* 404-es oldal */}
        <Route path="*" element={<NotFound />} />        
       {/* Dinamikus útvonal */}
        <Route path="/user/:id" element={<Users />} />
      </Routes>
      </BrowserRouter>    
  );
}
export default App;

import React from 'react';

import { BrowserRouter } from 'react-router-dom';

import { Routes, Route } from 'react-router-dom';

import Navbar from './components/Navbar';

import Home from './components/Home';

import About from './components/About';

import Contact from './components/Contact';

import NotFound from './components/NotFound';

import Users from './components/Users';

function App() {

return (

{/* 404-es oldal */}

{/* Dinamikus útvonal */}

</Routes>

</BrowserRouter>

);

}

export default App;

Home.jsx

A gomb onClick eseményre azonnal átirányítja a felhasználót az /about oldalra, újratöltés nélkül. A useNavigate egy imperatív navigációs eszköz, amelyet akkor használunk, ha nem linkre kattintással, hanem esemény (pl. gombnyomás, API válasz) alapján akarunk átirányítani.

Mire lehet még használni a navigate-et?
navigate(-1); // egy lépéssel vissza
navigate(1); // egy lépéssel előre
navigate(‘/about’, { state: { from: ‘home’ } });
navigate(‘/about’, { replace: true });

import React from 'react';
import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();
  return (    
<div>
      <h1>Welcome to Home Page</h1>
      <button onClick={() => navigate('/about')}>Go to About</button>
    </div>

  );
}
export default Home;

import React from 'react';

import { useNavigate } from 'react-router-dom';

function Home() {

const navigate = useNavigate();

return (

<div>

<h1>Welcome to Home Page</h1>

<button onClick={() => navigate('/about')}>Go to About</button>

</div>

);

}

export default Home;

Navbar.jsx

Ez a komponens tartalmazza a navigációs sávot, amely NavLink-eket használ az oldalak közötti váltáshoz.
A NavLink automatikusan hozzáadja az active osztályt az aktuális oldal linkjéhez, így könnyen stílusozható.

import React from 'react';
import { Link } from 'react-router-dom';
import '../assets/Navbar.css';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
      <Link to="/user/123">User 123</Link>
    </nav>
  );
}

export default Navbar;

import React from 'react';

import { Link } from 'react-router-dom';

import '../assets/Navbar.css';

function Navbar() {

return (

<nav>

<Link to="/about">About</Link>

<Link to="/contact">Contact</Link>

</nav>

);

}

export default Navbar;

NotFound.jsx

404-es oldal, ha az útvonal nem létezik. Felhasználói élmény szempontjából fontos, hogy jelezzük, ha az oldal nem található. Természetesen megadható lenne akár a Home komponens is, hogy bármilyen ismeretlen url esetén oda ugorjunk vissza.

import React from 'react';
import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
      <Link to="/" style={{ color: 'blue', textDecoration: 'underline' }}>
        Go back to Home
      </Link>
    </div>
  );
}

export default NotFound;

import React from 'react';

import { Link } from 'react-router-dom';

function NotFound() {

return (

<h1>404 - Page Not Found</h1>

<p>The page you are looking for does not exist.</p>

Go back to Home

</Link>

</div>

);

}

export default NotFound;

Users.jsx

Dinamikus útvonal kezelése (/user/:id).
Bemutatja a useParams hook használatát, amivel az URL paramétereket olvashatjuk ki.

import React from 'react';
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h1>User Profile: {id}</h1>;
}
export default User;

import React from 'react';

import { useParams } from 'react-router-dom';

function User() {

const { id } = useParams();

return <h1>User Profile: {id}</h1>;

}

export default User;

Frissítve: 2025.11.11.

2. példa: Bamutatkozó oldal sablon

Kategóriák

Friss bejegyzések

WS2022 – WDS

Playwright teszt