Добавляются ли какие-либо хуки к компоненту если подключен роутер в приложении

Хуки и эффекты при подключении роутера

Да, подключение роутера добавляет дополнительные возможности и побочные эффекты в компоненты. В зависимости от фреймворка (React Router, Vue Router, Next.js) поведение отличается, но общие принципы схожи.

React Router (v6+)

Доступные хуки

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

function MyComponent() {
  // 1. useLocation — информация о текущем маршруте
  const location = useLocation();
  console.log(location.pathname);  // /users/123
  console.log(location.search);    // ?name=John
  console.log(location.hash);      // #section
  console.log(location.state);     // Данные, переданные при навигации
  
  // 2. useParams — параметры из URL
  const params = useParams();
  console.log(params.userId);  // Из пути /users/:userId
  
  // 3. useNavigate — функция для навигации
  const navigate = useNavigate();
  const handleClick = () => {
    navigate("/profile", { state: { user: "John" } });
  };
  
  // 4. useMatch — проверка, совпадает ли путь с паттерном
  const match = useMatch("/users/:userId");
  
  // 5. useSearchParams — работа с query параметрами
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("q");
  
  return <div>Компонент с роутером</div>;
}

Побочные эффекты и useEffect

function UserPage() {
  const { userId } = useParams();
  const location = useLocation();
  const [user, setUser] = useState(null);
  
  // Эффект срабатывает когда маршрут изменяется
  useEffect(() => {
    console.log("Компонент смонтирован или маршрут изменился");
    
    // Загрузка данных пользователя
    fetchUser(userId).then(setUser);
    
    // Cleanup функция
    return () => {
      console.log("Очистка перед демонтированием или изменением маршрута");
    };
  }, [userId]); // Зависимость от userId
  
  // Отслеживание изменений query параметров
  useEffect(() => {
    console.log("Маршрут изменился:", location.pathname);
  }, [location.pathname]);
  
  return <div>{user?.name}</div>;
}

Next.js App Router

Встроенные хуки маршрутизации

"use client";

import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";

function MyComponent() {
  // 1. useRouter — навигация программно
  const router = useRouter();
  const handleClick = () => {
    router.push("/dashboard");
    // или
    router.back();
    router.forward();
    router.refresh(); // Обновить текущую страницу
  };
  
  // 2. usePathname — текущий путь
  const pathname = usePathname();
  console.log(pathname); // /en/dashboard
  
  // 3. useSearchParams — query параметры
  const searchParams = useSearchParams();
  const query = searchParams.get("sort");
  
  // Эффект при изменении пути
  useEffect(() => {
    console.log("Путь изменился на:", pathname);
  }, [pathname]);
  
  return <button onClick={handleClick}>Перейти</button>;
}

Хуки, которые НЕ добавляются автоматически

// Next.js не добавляет автоматические хуки при подключении роутера,
// но есть встроенные хуки, которые вы используете явно

// Если нужны более сложные случаи, нужно работать с useEffect
function ProtectedRoute() {
  const router = useRouter();
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  useEffect(() => {
    const checkAuth = async () => {
      const response = await fetch("/api/auth/me");
      if (!response.ok) {
        router.push("/login");
      } else {
        setIsAuthenticated(true);
      }
    };
    
    checkAuth();
  }, [router]);
  
  if (!isAuthenticated) return <div>Загрузка...</div>;
  return <div>Защищённый контент</div>;
}

Vue Router (v4)

Доступные хуки и функции

import { useRoute, useRouter } from "vue-router";
import { onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";

export default {
  setup() {
    const route = useRoute(); // Текущий маршрут
    const router = useRouter(); // Экземпляр роутера
    
    // Текущие параметры
    console.log(route.params.id);
    console.log(route.query.sort);
    
    // Навигация
    const goHome = () => {
      router.push({ name: "home" });
    };
    
    // Хук перед изменением маршрута
    onBeforeRouteUpdate((to, from) => {
      console.log(`Переход с ${from.path} на ${to.path}`);
    });
    
    // Хук перед выходом из маршрута
    onBeforeRouteLeave((to, from) => {
      if (hasUnsavedChanges) {
        return confirm("Есть несохранённые изменения");
      }
    });
    
    return { goHome };
  }
};

Общие побочные эффекты, которые ДОБАВЛЯЮТСЯ

1. Автоматическое монтирование/демонтирование компонентов

function PageComponent() {
  useEffect(() => {
    console.log("componentDidMount");
    // Автоматически срабатывает при переходе на эту страницу
    
    return () => {
      console.log("componentWillUnmount");
      // Срабатывает при переходе с этой страницы
    };
  }, []);
  
  return <div>Страница</div>;
}

2. Очистка состояния между маршрутами

function UserList() {
  const [users, setUsers] = useState([]);
  const { userId } = useParams();
  
  useEffect(() => {
    // При каждом изменении userId загружаются новые данные
    fetchUsers(userId).then(setUsers);
  }, [userId]);
  
  return <div>{users.map(u => <div key={u.id}>{u.name}</div>)}</div>;
}

3. Scroll восстановление

// React Router может быть настроен для восстановления scroll позиции
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function ScrollToTop() {
  const { pathname } = useLocation();
  
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  
  return null;
}

// Использование в App
function App() {
  return (
    <Router>
      <ScrollToTop />
      <Routes>
        {/* ... */}
      </Routes>
    </Router>
  );
}

Что НЕ добавляется автоматически

// Нет автоматических хуков для:
// - Отслеживания истории браузера
// - Сохранения scroll позиции
// - Предотвращения потери данных
// - Аналитики и логирования

// Нужно реализовать вручную:

function MyApp() {
  const location = useLocation();
  
  // Логирование маршрутов (аналитика)
  useEffect(() => {
    analytics.track("page_view", {
      path: location.pathname,
      timestamp: new Date()
    });
  }, [location]);
  
  return <div>App</div>;
}

Best Practices при работе с роутером

1. Отслеживание параметров маршрута

function ProductPage() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    setError(null);
    
    fetchProduct(productId)
      .then(setProduct)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [productId]); // Переполнение данных при изменении productId
  
  if (loading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error.message}</div>;
  
  return <div>{product?.name}</div>;
}

2. Защита маршрутов

function ProtectedRoute({ children }) {
  const router = useRouter();
  const [isAuthorized, setIsAuthorized] = useState(false);
  
  useEffect(() => {
    const checkAuth = async () => {
      const response = await fetch("/api/auth/check");
      if (!response.ok) {
        router.push("/login");
      } else {
        setIsAuthorized(true);
      }
    };
    
    checkAuth();
  }, [router]);
  
  return isAuthorized ? children : null;
}

3. Синхронизация URL состояния

function SearchPage() {
  const [query, setQuery] = useState("");
  const [searchParams, setSearchParams] = useSearchParams();
  
  // Инициализация из URL
  useEffect(() => {
    const urlQuery = searchParams.get("q") || "";
    setQuery(urlQuery);
  }, [searchParams]);
  
  // Обновление URL при изменении query
  const handleSearch = (newQuery) => {
    setQuery(newQuery);
    setSearchParams({ q: newQuery });
  };
  
  return (
    <input
      value={query}
      onChange={(e) => handleSearch(e.target.value)}
    />
  );
}

Итоговая таблица

Вывод: подключение роутера НЕ добавляет новые хуки жизненного цикла автоматически, но предоставляет специальные хуки для работы с маршрутизацией. Все побочные эффекты нужно описывать явно через useEffect или эквивалентные механизмы.