React Router: установка и маршруты

В самом React нет страниц — только компоненты. Чтобы разным адресам соответствовали разные экраны, используют библиотеку React Router (курс написан для версии 7). Маршрут связывает адрес с компонентом. Переход между страницами происходит без перезагрузки: меняется адрес и подставляется нужный компонент. Такое приложение называют одностраничным (SPA).

Установка

В папке проекта блога выполните:

npm install react-router

Подключение

Всё приложение оборачивают в BrowserRouter — в src/main.jsx:

// src/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import App from './App.jsx';
 
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

BrowserRouter следит за адресом в браузере и сообщает его компонентам внутри.

Страницы

Компоненты-страницы принято класть в src/pages/. Создайте два файла:

// src/pages/HomePage.jsx
import PostList from '../components/PostList.jsx';
 
export default function HomePage() {
  return (
    <>
      <h1>Блог</h1>
      <PostList />
    </>
  );
}

// src/pages/AboutPage.jsx
export default function AboutPage() {
  return <h1>О блоге</h1>;
}

Маршруты

Routes выбирает тот Route, путь которого совпал с адресом, и показывает его компонент из пропа element:

// src/App.jsx
import { Route, Routes } from 'react-router';
import HomePage from './pages/HomePage.jsx';
import AboutPage from './pages/AboutPage.jsx';
 
export default function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  );
}

Откройте http://localhost:5173/ — будет список статей, http://localhost:5173/about — заголовок «О блоге».

Ссылки

Для переходов используют компонент Link. Он меняет адрес, не перезагружая страницу. Создайте меню src/components/Nav.jsx:

// src/components/Nav.jsx
import { NavLink } from 'react-router';
 
export default function Nav() {
  return (
    <nav>
      <NavLink to="/">Статьи</NavLink> <NavLink to="/about">О блоге</NavLink>
    </nav>
  );
}

NavLink — это Link, который добавляет ссылке текущей страницы класс active. Выведите <Nav /> в App над Routes — меню будет на всех страницах, а с правилом .active { font-weight: bold; } текущий пункт станет жирным.

Страница 404

Маршрут со звёздочкой срабатывает, когда не подошёл ни один другой:

// src/App.jsx
<Route path="*" element={<p>Страница не найдена</p>} />

Адрес /abc покажет «Страница не найдена».

Частая ошибка

Обычная ссылка <a href> перезагружает страницу целиком: приложение запускается заново, а состояние теряется.

// Неправильно: <a href="/about">О блоге</a>
 
<Link to="/about">О блоге</Link>

Тег a оставьте для ссылок на другие сайты, а внутри приложения используйте Link и NavLink.