React Router DOM

A React Router DOM egy olyan csomag, amely lehetővé teszi a React alkalmazásokban a navigációt. S segítségével a különböző oldalakat külön-külön komponensekbe tudjuk szervezni, és ezeket a komponenseket a Route komponens segítségével tudjuk megjeleníteni.

Csomag telepítése

A csomagot az npm segítségével tudjuk telepíteni.

npm install react-router-dom

Megvalósítás

Alapesetben az index.tsx fájlba szoktuk tenni a React Router DOM-ot.

Ezt két lépésben kell megtennünk:

Importálás

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

Használat

<BrowserRouter>
    <Routes>
        <Route path="/" element={<App />} />
        <Route path="/masik" element={<Masik />} />
        <Route path="*" element={<h1>404, az oldal nem található</h1>} />
    </Routes>
</BrowserRouter>

A következő példában egyesítve látható a két lépés az eredeti index.tsx fájlban

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Masik from "./Masik";

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />} />
            <Route path="/user/:id" element={<Masik />} />
            <Route path="*" element={<h1>404, az oldal nem található</h1>} />
        </Routes>
    </BrowserRouter>
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Paraméterek kezelése

A React Router DOM segítségével lehetőségünk van paramétereket átadni az URL-ben, és ezeket a paramétereket a useParams hook segítségével tudjuk elérni.

Használat

Router beállítása

Adjunk hozzá egy új sort a routerhez, amely egy paramétert fog várni az URL-ben:

index.tsx

<Route path="/user/:id" element={<Masik />} />

A paraméter felhasználása

Az alábbi példában felhasználuk az URL-ben kapott id-t a későbbi adatfeldolgozáshoz.

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

const UserPage = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>{id}</h1>
        </div>
    );
};