Как закрывать модальное окно действием назад, избегая возвращения по истории?

Question

[Solevoy_2015]

Знаю что можно создать новую запись в стек истории через window.history.pushState, но хотелось бы обойти этот способ, используя инструменты react. Хук useNavigate ререндерит страницу, этим отменяет анимацию закрытия модального окна. Как быть?

Answer 1

[Семён Окулов]

Открытие окна не производит смены URL, ты остаешься на той же странице, поэтому достаточно странная необходимость делать закрытие модалки при клике на Назад, но это может выглядеть как-то так

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

function ModalComponent() {
  const history = useHistory();

  const handleCloseModal = () => {
    // Закрытие модального окна и замена текущего пути новым путем (например, '/')
    history.replace('/');
  };

  return (
    <div>
      {/* Ваше содержимое модального окна */}
      <button onClick={handleCloseModal}>Закрыть</button>
    </div>
  );
}

Comments

[Solevoy_2015]

Пишу мобильную версию сайта, хотелось бы получить интерфейс как у приложения. Поэтому хотелось бы иметь возможность закрывать модалки действием назад. Хук useHistory - https://qna.habr.com/q/1071298. Есть другие способы работать со стеком истории? В данном случае мне нужно задавать новый url с кешом, чтобы действием назад мы его убирали, ведь изменение кеша не отправляет данных на сервер и не ререндерит страницу.

[Семён Окулов]

Solevoy_2015, по сути, чтобы закрыть модалку при клике на Назад надо просто отслеживать нажатие на эту кнопку и всё

useEffect(() => {
    const handleBackButton = (event) => {
      event.preventDefault();
      // Здесь вы можете добавить логику для закрытия модального окна
    };

    window.addEventListener('popstate', handleBackButton);

    return () => {
      window.removeEventListener('popstate', handleBackButton);
    };
  }, []);

[Solevoy_2015]

Семён Окулов, Именно так и делаю, но вопрос в другом был, мне нужно остановить навигацию, у меня получилось сделать простое перенаправление, но действие назад и само перенаправление вызывают смену url, что ререндерит страницу. Я добавлял новую запись в стек истории с помощью window.history.pushState( и добавлял кеш к уже используемому url ) и получалось что при действии назад, кеш убирался без рендера. Но вся проблема в том, что window.history и история в react разные, и по итогу это не приятный костыль, так который еще ломает последовательность записей в истории сайта.

[Семён Окулов]

Solevoy_2015, можно ведь через `event.preventDefault();` отменить переход (юзаем popstate)

import React, { useEffect } from 'react';

const ModalComponent = () => {
  useEffect(() => {
    const handlePopState = (event) => {
      // отменяем переход
      event.preventDefault();
    };

    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  const closeModal = () => {
   
  };

  const handleBackButton = () => {
    // Обработка нажатия кнопки "Назад" на телефоне
  };

  useEffect(() => {
    window.history.pushState(null, document.title, window.location.href);
    window.addEventListener('popstate', handleBackButton);

    return () => {
      window.removeEventListener('popstate', handleBackButton);
    };
  }, []);

  return (
    <div>
      <button onClick={closeModal}>Закрыть</button>
    </div>
  );
};

export default ModalComponent;

https://stackoverflow.com/questions/25806608/how-t...