Как изменить URL в адресной строке браузера без перезагрузки страницы?

Используйте History API: pushState и replaceState

Для изменения URL без перезагрузки страницы в JavaScript существует встроенный History API. Он позволяет манипулировать историей браузера и менять адресную строку, не вызывая навигацию. Основные методы:

• history.pushState(state, title, url) — добавляет новую запись в историю браузера и меняет URL.
• history.replaceState(state, title, url) — заменяет текущую запись в истории (URL меняется, но кнопка "Назад" не добавляется).
• window.onpopstate — событие, которое срабатывает при нажатии кнопок "Назад" или "Вперёд".

Пошаговое решение вашей задачи

Вот как правильно организовать смену URL при динамической загрузке контента:

// Функция для загрузки контента и обновления URL
function navigateTo(url, title) {
  // 1. Загружаем контент динамически
  fetch(url)
    .then(response => response.text())
    .then(html => {
      // 2. Обновляем содержимое страницы
      document.getElementById('content').innerHTML = html;
      
      // 3. Меняем URL без перезагрузки
      history.pushState({ page: url }, title, url);
      
      // 4. Обновляем заголовок страницы (опционально)
      document.title = title || 'My SPA';
    })
    .catch(error => {
      console.error('Ошибка загрузки:', error);
    });
}

// Обработчик кликов по ссылкам
document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', function(event) {
    event.preventDefault(); // Отменяем стандартный переход
    const url = this.getAttribute('href');
    navigateTo(url, this.textContent);
  });
});

// Обработка кнопок "Назад" и "Вперёд"
window.addEventListener('popstate', function(event) {
  if (event.state && event.state.page) {
    // Загружаем контент по сохранённому URL
    fetch(event.state.page)
      .then(response => response.text())
      .then(html => {
        document.getElementById('content').innerHTML = html;
      });
  }
});

Ключевые моменты, которые нужно понять

• pushState vs replaceState: Используйте pushState для обычной навигации (каждый клик — новая запись в истории). replaceState применяйте, когда нужно обновить URL без добавления в историю (например, при смене параметров фильтра).
• Объект state: Первый аргумент — это любые данные, которые вы хотите сохранить для этой записи истории. Они будут доступны в событии popstate. Обычно хранят URL или ID страницы.
• Заголовок (title): Второй аргумент — строка, но большинство браузеров его игнорируют. Лучше обновлять document.title вручную.
• Событие popstate: Оно срабатывает ТОЛЬКО при навигации по истории (кнопки браузера), но НЕ при вызове pushState или replaceState. Это важно для разделения логики.

Полный пример для SPA с маршрутизацией

// Простой роутер
const router = {
  routes: {},
  
  addRoute(path, template) {
    this.routes[path] = template;
  },
  
  navigate(path) {
    const template = this.routes[path];
    if (template) {
      document.getElementById('content').innerHTML = template;
      history.pushState({ path }, '', path);
      document.title = `SPA - ${path}`;
    }
  },
  
  init() {
    // Обработка начального URL
    const path = window.location.pathname;
    this.navigate(path);
    
    // Слушаем popstate
    window.addEventListener('popstate', (event) => {
      const path = event.state?.path || '/';
      const template = this.routes[path];
      if (template) {
        document.getElementById('content').innerHTML = template;
      }
    });
  }
};

// Использование
router.addRoute('/', '<h1>Главная</h1>');
router.addRoute('/about', '<h1>О нас</h1><p>Текст...</p>');
router.init();

Этот подход полностью решает вашу проблему: URL меняется, кнопка "Назад" работает, а страница не перезагружается. Все современные SPA-фреймворки (React Router, Vue Router) используют именно этот API под капотом.

// Установка хэша
window.location.hash = '#about'; // URL станет: https://mysite.com/#about

// Чтение текущего хэша
const currentHash = window.location.hash; // '#about'

// Событие при изменении хэша
window.addEventListener('hashchange', function() {
  const page = window.location.hash.slice(1); // убираем '#'
  loadContent(page);
});

function loadContent(page) {
  // Ваша логика загрузки контента
  fetch(`/api/content/${page}`)
    .then(response => response.text())
    .then(html => {
      document.getElementById('content').innerHTML = html;
    });
}