Popup Issue
Answered
Singapura posted this in #help-forum
SingapuraOP
So there is a popup which needs to be rendered in every page of nextjs and it has close button to close the popup If I navigate in other different pages it should reopen the popup. so I am using nextjs 14 app directory the popup component is calling in the main layout. The Issue is when I'm navigating in other different pages it is not reopening. Navigating is all done using the link tag of next JS
Answered by fuma 💙 joulev
It’s supposed because the Link tag can avoid unnecessary re-renders, while anchor tag doesn’t perform optimisation. As the docs states, layouts are not re-rendered.
You should manually re-open the popup with an useEffect, using pathname as dependency
You should manually re-open the popup with an useEffect, using pathname as dependency
12 Replies
SingapuraOP
stil not working @joulev
const [showfair, setShowFair] = useState(true);
const onClose = () => {
setShowFair(false);
}
return (
showfair && ( <div className="bg-[#0000006e] w-full h-full fixed top-[56%] left-1/2 -translate-x-1/2 -translate-y-1/2" onClick={onClose}>
<div className="w-[90%] m-auto h-full flex justify-center flex-col">
const onClose = () => {
setShowFair(false);
}
return (
showfair && ( <div className="bg-[#0000006e] w-full h-full fixed top-[56%] left-1/2 -translate-x-1/2 -translate-y-1/2" onClick={onClose}>
<div className="w-[90%] m-auto h-full flex justify-center flex-col">
<Template><FairAlert/></Template> This in Layout Pgae
not sure if it helps, but I also had a popup issue in my project and in order to make my popup show up again (in my case after a user button click) I just changed the component's key which makes it re-render
in my case my key got updated every time a button is clicked, but I think in your case you could do it in your onclose
just keep the state tracked in the highest component you can
SingapuraOP
For navigating different pages home to about-us. If I'm using anchor tag it is working but If I'm using the link tag it doesn't call the component So What should I use? Basically what is happening the popup is render initially when I close the popup and I navigate to home to about-us using nextjs Link Tag, The popup is not render or doesn't call the component.@fuma 💙 joulev @chan
The component which is called in layout page because the popup I need in every pages
It’s supposed because the Link tag can avoid unnecessary re-renders, while anchor tag doesn’t perform optimisation. As the docs states, layouts are not re-rendered.
You should manually re-open the popup with an useEffect, using pathname as dependency
You should manually re-open the popup with an useEffect, using pathname as dependency
Answer
SingapuraOP
Issue solved Thanks buddy @fuma 💙 joulev