Не пойму в чем дело, вся проблема сугубо с 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 предыдущей страницы, а затем уже текущей страницы и поэтому перезагрузка идет