React NavLink, UseNavigate

NavLink

A React Router-ben a Link és a NavLink ugyanarra szolgál: kliensoldali navigációra, azaz új oldal betöltése nélkül váltanak útvonalat. A lényegi különbség az, hogy a NavLink tud „aktív” állapotot kezelni (amikor az aktuális URL megfelel a link céljának), és ehhez stílust/klasszt ad automatikusan — menükhöz, navigációhoz ideális.

Link: Egyszerű navigációs hivatkozás. Nem foglalkozik aktív állapottal.
NavLink: Olyan Link, ami aktív/pending állapot alapján dinamikusan ad klasszt/stílust (pl. kiemelés az aktuális menüpontnál), és kezeli az aria-current attribútumot hozzáférhetőség céljából.

Link tulajdonságai:

to: hová navigáljon (string vagy { pathname, search, hash }).
replace: ne új history bejegyzés legyen, hanem cserélje a jelenlegit.
reloadDocument: teljes oldal újratöltése (kerüld, ha SPA viselkedést akarsz).
state: navigációs állapot átadása.
preventScrollReset: ne görgessen fel navigációkor.

NavLink tulajsdonságai: Link tulajdonságai + ezeken kívül:

Aktív állapot felismerése: ha az aktuális URL megegyezik a to-val (vagy annak prefixével), a NavLink aktív.
Dinamikus className és style: függvényt adhatsz meg, ami paraméterként megkapja az állapotot.
End: pontos illesztésre kényszerítés.pl: Példa: to=”/mentors” aktív lesz /mentors/42 alatt is; ha ezt nem szeretnénk, állítsuk át end-re:

isActive: az útvonal illeszkedik-e?
isPending: épp folyamatban van-e a navigáció (adatbetöltésnél hasznos) ?

<NavLink
  to="/dashboard"
  className={({ isActive, isPending }) =>
    isActive ? "link active" : isPending ? "link pending" : "link"
  }
  style={({ isActive }) => ({
    fontWeight: isActive ? 700 : 400,
    color: isActive ? "#0a7" : "#333",
  })}
>
  Vezérlőpult
</NavLink>

<NavLink

to="/dashboard"

className={({ isActive, isPending }) =>

isActive ? "link active" : isPending ? "link pending" : "link"

}

style={({ isActive }) => ({

fontWeight: isActive ? 700 : 400,

color: isActive ? "#0a7" : "#333",

})}

Vezérlőpult

</NavLink>

Példa:

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

export function Menu() {
  return (
    <nav className="menu">
      <NavLink to="/" end className={({ isActive }) => isActive ? "active" : undefined}>
        Kezdőlap
      </NavLink>
      <NavLink to="/courses" className={({ isActive }) => isActive ? "active" : undefined}>
        Kurzusok
      </NavLink>
      <NavLink to="/mentors" className={({ isActive, isPending }) =>
        isPending ? "pending" : isActive ? "active" : undefined
      }>
        Mentorok
      </NavLink>
    </nav>
  );
}

// Link

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

export function Menu() {
  return (
    <nav className="menu">
      <Link to="/">Kezdőlap</Link>
      <Link to="/courses">Kurzusok</Link>
      <Link to="/mentors">Mentorok</Link>
    </nav>
  );
}

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

export function Menu() {

return (

<NavLink to="/" end className={({ isActive }) => isActive ? "active" : undefined}>

Kezdőlap

</NavLink>

<NavLink to="/courses" className={({ isActive }) => isActive ? "active" : undefined}>

Kurzusok

</NavLink>

isPending ? "pending" : isActive ? "active" : undefined

Mentorok

</NavLink>

</nav>

);

}

// Link

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

export function Menu() {

return (

<Link to="/">Kezdőlap</Link>

<Link to="/courses">Kurzusok</Link>

<Link to="/mentors">Mentorok</Link>

</nav>

);

}

UseNavigate

A useNavigate a React Router (v6+) hookja, amivel programozott navigációt tudunk végrehajtani komponensekből és eseménykezelőkből. Olyan, mintha egy „imperatív” Link lenne: nem linkre kattintva navigál, hanem kódból hívjuk meg. Csak olyan komponensben használható, amely Router (pl. <BrowserRouter>) alatt renderelődik.

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

function Example() {
  const navigate = useNavigate();

  const goToMEntors = () => {
    navigate("/mentors");
  };

  return <button onClick={goToMentors}>Mentorok</button>;
}

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

function Example() {

const navigate = useNavigate();

const goToMEntors = () => {

navigate("/mentors");

};

return <button onClick={goToMentors}>Mentorok</button>;

}

Útvonalra navigálás: navigate(„/mentors”);
Relatív navigáció (aktuális útvonalhoz képest): navigate(„/peter”) ; // /mentors/peter-t jelenti
Előre/hátra a történetben: navigate(-1) vagy (1) // vissza vagy előre
Objektum
replace – ne tegyen új bejegyzést a history-ba: navigate(„/login”, { replace: true });
state – állapot átadás
görgetés kezelése (preventScrollReset): navigate(„/mentors”, { preventScrollReset: true });

Példák:

Bejelentkezés után átirányítás

const navigate = useNavigate();

async function handleLogin() {
  await login();
  navigate("/dashboard", { replace: true });
}

const navigate = useNavigate();

async function handleLogin() {

await login();

navigate("/dashboard", { replace: true });

}

Navigáció onClick-ben „link” helyett

<button onClick={() => navigate(-1)}>Vissza</button>

1	<button onClick={() => navigate(-1)}>Vissza</button>

Védett oldal

import { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";

function ProtectedPage({ isAuthenticated }) {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    if (!isAuthenticated) {
      navigate("/login", { replace: true, state: { from: location } });
    }
  }, [isAuthenticated, navigate, location]);

  return isAuthenticated ? <div>Titkos tartalom</div> : null;
}

import { useEffect } from "react";

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

function ProtectedPage({ isAuthenticated }) {

const navigate = useNavigate();

const location = useLocation();

useEffect(() => {

if (!isAuthenticated) {

navigate("/login", { replace: true, state: { from: location } });

}

}, [isAuthenticated, navigate, location]);

return isAuthenticated ? <div>Titkos tartalom</div> : null;

}

NavLink

Link tulajdonságai:

NavLink tulajsdonságai: Link tulajdonságai + ezeken kívül:

Példa:

UseNavigate

Példák:

Kategóriák

Friss bejegyzések

React Outlet

React NavLink, UseNavigate