Задать вопрос
ms-dred
@ms-dred
Вечно что то не то и что то не так...

Почему страница перезагружается при модельном роутинге в Next.js?

Не пойму в чем дело, вся проблема сугубо с popstate.
Задача стоит следующая, на главной странице идут посты при клике по которым нужно просто открыть модельное окно и отобразить содержимое самого поста, что то вроде постов в VK.
Эту возможность я реализовал
const handlePress = (e: any) => {
        e.preventDefault()

       //..........
     
        window.history.pushState({
            ...window.history.state,
            any: t.getAttribute("data-any"),
            type: t.getAttribute("data-type"),
            placeholderImage
        },
            o.alt,
            t.pathname
        )


       // store - контекст
        store.setUpdatePhootModal(true) // Обновляю содержимое модельного окна
        store.setOpenPhotoModal(true) // открываю модельное окно
}
<Link
            onClick={handlePress}
......


В самом компоненте отвечающем за отображение модельного окна, делаю следующее
.....
const handleClose = useCallback((e: any) => {
    // Закроем окно
   store.setOpenPhotoModal(false)
}, [store.isOpenPhotoModal])

const handlePopstate = useCallback((e: any) => {
      // Если путь содержит в себе URL страницы поста
      if (null !== window.location.pathname.match(paths)) {
          // Обновляем данные
          store.setUpdatePhootModal(true)
      } else {
          // Если путь в URL не содержит страницу постов, то надо закрыть окно
          handleClose()
      }
}, [store, handleClose])


// тут я подгружаю дополнительные данные поста, чтобы содержимое модельного окна выглядело как сама страница поста
useEffect(() => {
    if (store.isOpenPhotoModal && store.isUpdatePhotoModal && window.history.state?.any) {
        const request = async () => { .....
        request()
            .then(.........

        window.addEventListener("popstate",  handlePopstate)
    }
}, [])


Если я отрываю например главную страницу, открываю пост, закрываю пост, открываю пост и возвращаюсь назад (popstate), всё работает идеально, как нужно, но если после этих манипуляций перейти на другую страницу, к примеру на страницу категорий с постами, и открыть пост, а после нажать на кнопку Назад, то окно закрывается и страница перезагружается. Где я допустил косяк или что я не учел, пропустил, понять не могу =(

Еще сейчас заметил следующее
При открытии закрытии модельного окна, растет и число выполнения handleClose, видимо где то явно накосячил =) Возможно handleClose выполняется многократно и сначала выполняется с URL предыдущей страницы, а затем уже текущей страницы и поэтому перезагрузка идет
  • Вопрос задан
  • 97 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы