Компоненти <Link> та <NavLink>

При переході на якусь іншу сторінку в межах проєкту використовують тег посилання з відносним шляхом <a href="/works">. У такому випадку браузер перезавантажить сторінку.

Для кращого опису переходів по навігації без перезавантаження сторінки використовують компоненти <Link> та <NavLink>. Вони рендерять той самий тег <a>, от тільки при натисканні не перезавантажується сторінка, а браузер просто оновлює контент по зміні адреси URL.

<nav>
  <Link to="/">Home</Link>
  <Link to="/about">About</Link>
  <Link to="/reviews">Reviews</Link>
  <Link to="/works">Works</Link>
</nav>

Компонент <NavLink> має одну особливість. Він може мати додаткову стилізацію у разі, якщо у його prop to значення збігається з посиланням в адресному рядку. В такому разі компоненту додається клас active.

Зазвичай цей компонент використовують в головній верхній або нижній навігації для стилізації посилання на поточну сторінку.

App.jsx

import { Routes, Route, NavLink } from "react-router-dom";
import styled from "styled-components";

import Home from "path/to/pages/Home";
import About from "path/to/pages/About";
import Reviews from "path/to/pages/Reviews";
import Works from "path/to/pages/Works";
import NotFound from "path/to/pages/NotFound";

const StyledLink = styled(NavLink)`
  color: black;

  &.active {
    color: red;
  }
`;

export const App = () => {
  return (
    <div>
      <nav>
        <StyledLink to="/" end>
          Home
        </StyledLink>
        <StyledLink to="/about">About</StyledLink>
        <StyledLink to="/reviews">Reviews</StyledLink>
        <StyledLink to="/works">Works</StyledLink>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/reviews" element={<Reviews />} />
        <Route path="/works" element={<Works />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
};