useLocation

Убедитесь, что ваше приложение использует react-router-dom и обёрнуто в (или другой роутер). Импортируйте и используйте useLocation в функциональном компоненте.

useLocation — это хук из библиотеки react-router-dom, который предоставляет доступ к текущему объекту местоположения (location) в вашем приложении. Объект местоположения содержит информацию о текущем URL, такую как путь, параметры запроса, хеш и состояние (state).

Что делает useLocation?

useLocation возвращает объект location, который включает:

pathname — строка с текущим путём URL (например, /about).
search — строка с параметрами запроса (например, ?id=123).
hash — строка с хешем (например, #section1).
state — объект состояния, переданный через навигацию (например, при использовании navigate или push).
key — уникальный идентификатор текущего местоположения (используется React Router для внутренней работы).

Этот хук полезен, когда вам нужно получить или отреагировать на изменения в URL без необходимости вручную парсить адресную строку.

Когда использовать useLocation?

1. Когда нужно отобразить данные, зависящие от текущего URL (например, получить ID из строки запроса).
2. Для условного рендеринга на основе пути.
3. Для отслеживания изменений URL (например, в сочетании с useEffect).

Пример кода

import React from 'react';
import { useLocation } from 'react-router-dom';

function CurrentLocation() {
  const location = useLocation();
  console.log(location);

  return (
    <div>
      <p>Текущий путь: {location.pathname}</p>
      <p>Параметры запроса: {location.search}</p>
      <p>Хеш: {location.hash}</p>
      <p>Состояние: {JSON.stringify(location.state)}</p>
    </div>
  );
}

export default CurrentLocation;