Какую версию React Router использовал

Разбор вопроса «Какую версию React Router использовал» для Frontend Developer: что проверяет интервьюер, ключевые тезисы, практические примеры и частые ошибки.

Интервьюер хочет убедиться, что кандидат действительно работал с React Router, понимает различия между версиями и может аргументировать выбор конкретной версии. Также проверяется практический опыт и способность адаптироваться к изменениям.

Ключевые тезисы

Назвать конкретную версию React Router (например, v6.x), которую использовал в проектах.
Упомянуть ключевые изменения/фичи этой версии (например, новые хуки useNavigate вместо useHistory, улучшенная поддержка относительных путей).
Сравнить с предыдущими версиями, если есть опыт работы с ними (например, переход с v5 на v6).
Привести пример использования в реальном проекте (если возможно).

Подробный ответ

React Router v6 — это последняя мажорная версия популярной библиотеки для маршрутизации в React-приложениях. Она принесла значительные изменения по сравнению с v5, включая новый API, улучшенную поддержку относительных путей и замену устаревших методов. Например, хук useHistory был заменен на useNavigate, что упростило навигацию. Также появились новые компоненты, такие как Routes, который заменил Switch, и улучшенная обработка вложенных маршрутов. В v6 также упростилась работа с динамическими параметрами маршрута, благодаря использованию синтаксиса :param. Эти изменения сделали библиотеку более удобной и предсказуемой в использовании.

Практические примеры

Пример 1

Пример использования useNavigate вместо useHistory:

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

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

  const handleClick = () => {
    navigate('/home');
  };

  return (
    <button onClick={handleClick}>Go to Home</button>
  );
}

Пример 2

Пример работы с динамическими параметрами маршрута в v6:

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

function App() {
  return (
    <Routes>
      <Route path="/users/:userId" element={<UserProfile />} />
    </Routes>
  );
}

function UserProfile() {
  const { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

Пример 3

Пример реализации защищенных маршрутов в v6:

import { Route, Navigate } from 'react-router-dom';

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth(); // ваша функция проверки авторизации

  return isAuthenticated ? children : <Navigate to="/login" />;
}

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
    </Routes>
  );
}

Частые ошибки

Использование устаревших методов из v5, таких как useHistory, в проекте с v6. Это приводит к ошибкам и неработоспособности кода.
Неправильная настройка вложенных маршрутов, что может вызвать проблемы с отображением компонентов.

Связанные темы

React Hooks (особенно useNavigate, useParams)
Динамическая маршрутизация в SPA
Аутентификация и авторизация в React-приложениях

Follow-up вопросы

Какие основные изменения в API появились в React Router v6 по сравнению с v5?

Уровень: intermediate

В v6 появились новые хуки, такие как useNavigate вместо useHistory, useRoutes для декларативной маршрутизации, а также улучшена поддержка относительных путей. Компоненты <Switch> заменены на <Routes>, а <Redirect> устарел в пользу <Navigate>.

Как ты реализовывал защищенные маршруты (например, для авторизованных пользователей) в React Router v6?

Уровень: intermediate

В v6 можно использовать компонент <Outlet> и обернуть защищенные маршруты в кастомный компонент (например, <PrivateRoute>), который проверяет авторизацию и перенаправляет на страницу входа, если необходимо. Для этого часто используют <Navigate> и условный рендеринг.

Какую версию React Router использовал

Вопрос

Профессия

Что хочет услышать интервьюер