Как получить текущий URL?

Получение текущего URL

В JavaScript существует несколько способов получить текущий URL страницы. Выбор метода зависит от окружения (браузер, Node.js) и конкретной задачи.

Встроенные объекты браузера

// window.location - основной объект для работы с URL
console.log(window.location.href);     // полный URL: https://example.com/path?query=1#hash
console.log(window.location.protocol); // протокол: https:
console.log(window.location.host);     // хост с портом: example.com:3000
console.log(window.location.hostname); // только домен: example.com
console.log(window.location.port);     // порт: 3000
console.log(window.location.pathname); // путь: /path
console.log(window.location.search);   // query строка: ?query=1
console.log(window.location.hash);     // якорь: #hash

URL API (современный подход)

// URL API обеспечивает удобный парсинг
const url = new URL(window.location.href);
console.log(url.origin);           // https://example.com
console.log(url.searchParams);     // URLSearchParams объект
console.log(url.searchParams.get("query")); // 1

// Красивое получение параметров
const queryValue = new URLSearchParams(window.location.search).get("query");
console.log(queryValue); // 1

Next.js специфика

// В Next.js используй useRouter для получения роутов
import { useRouter } from "next/navigation";

export function MyComponent() {
  const router = useRouter();
  
  console.log(router.pathname);      // текущий путь (App Router: используй pathname или asPath)
  console.log(router.query);         // параметры маршрута
  console.log(router.asPath);        // полный путь с query и hash
  
  return null;
}

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

// Получить все параметры GET
const params = new URLSearchParams(window.location.search);
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// Редирект с сохранением параметров
window.location.href = "/new-page" + window.location.search + window.location.hash;

// Изменить URL без перезагрузки страницы
window.history.pushState({}, "", "/new-path?query=2");

Важные различия

• window.location.href: полный URL, включая протокол и всё остальное
• window.location.pathname: только путь без домена и параметров
• URLSearchParams: удобный парсинг query-параметров
• window.history.pushState(): изменяет URL без перезагрузки

Для современных приложений рекомендую использовать URL API вместе с URLSearchParams для удобного парсинга параметров, а в Next.js - useRouter хук для работы с маршрутизацией.