Как закрывать окна при переходе между страницами в next.js?

Question

В проекте на next.js шапка и подвал на всех страницах одинаковые и помещены в _app.tsx в виде компонента Layout, который в качестве ребёнка принимает Component страницы. Т.е. при переходе по страницам шапка и подвал не меняются. Это очень удобно. Но возникла проблема.

Если в шапке открыть например popup, то при переходе на следующую страницу он по логике должне закрыться, но он не закроется т.к. это SPA шапка и подвал заданы единой обёрткой для страниц и не перерисовываютя при переходе между страницами.

Подскажите есть ли в next.js какие нибудь готовые решения для данной проблемы?

Можно ли как то может вручную добавить обработчик на переход между страницами и в нём в шапке и подвале закрывать открывшиеся из них окна и выпадающие меню?

Answer 1

Есть. Через состояние попапа т.е. через useState.

например у меня открывается меню и если нажать на любую страницу меню будет открыто. решил это так:

const [isNavCollapsed, setIsNavCollapsed] = useState(true);
const handleNavClose = () => setIsNavCollapsed(true);
const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);

Вызов меню осуществляется

onClick={ handleNavCollapse }

и повесил на блок для закрытия при переходе:

onClick={ handleNavClose }

Данный пример Вам не подойдет т.к. нет конкретного примера, но думаю направление будет понятно

Также есть через _app / useEffect и useRouter

useEffect(() => {
    const handleRouteChange = (url) => {
        console.log(`URL изменен на ${url}`)
/* ДОБАВИТЬ СЮДА ИЗМЕНЕНИЕ СОСТОЯНИЯ ПОПАПА НА ДЕФОЛТНОЕ */
    }
    router.events.on('routeChangeStart', handleRouteChange)
    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
    }
}, [])

Answer 2

Для решения этой проблемы в NextJS 14 я просто использовал usePathname() и useEffect().

const [isOpen, setIsOpen] = useState(false);
const pathname = usePathname();    
useEffect(() => {
    setIsOpen(false);
  }, [pathname]);

При изменении pathname отработает useEffect и в нем закрываем модальное окно.

БЛОГ НА HUSL

Как закрывать окна при переходе между страницами в next.js?

Ответы (2 шт):