Маршрутизация: React Router

React Router связывает URL с компонентами без полной перезагрузки. Навигация через Link/NavLink, параметры — через useParams.

Каркас

Оберните приложение в BrowserRouter, опишите Routes и Route. Для учебных проектов на Vite этого достаточно.

Дальше

Данные с сервера: запросы к API.

JavaScript

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

function Post() {
  const { id } = useParams();
  return <h1>Пост #{id}</h1>;
}

export function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Главная</Link>
        <Link to="/posts/1">Пост 1</Link>
      </nav>
      <Routes>
        <Route path="/" element={<p>Домашняя</p>} />
        <Route path="/posts/:id" element={<Post />} />
      </Routes>
    </BrowserRouter>
  );
}

Практическое задание

Задание: две страницы и ссылка между ними.

Есть BrowserRouter и минимум два Route
Навигация через Link, не через <a href> с полной перезагрузкой
Один маршрут с параметром :id
Параметр читается через useParams