Next 14 Intercepting route not working
Answered
Shy Albatross posted this in #help-forum
Shy AlbatrossOP
I've added a modal intercepting route to my app, basically a 1:1 copy of the example:
https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#examples
which looks like on the screen shot, and it doesn't work. When a Link is clicked, the URL changes to
I added a custom class to Modal (which is just a fixed div) and it doesn't appear in DOM, so the Modal doesn't get mounted.
Refreshing the page
Modal
Intercepting page
When any Link for
so it looks alright, but still, nothing happens. Any ideas? Is it just another of those things that broken with navigation in v14?
https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#examples
which looks like on the screen shot, and it doesn't work. When a Link is clicked, the URL changes to
/movie/12345, and... nothing happens. I added a console.log to the Modal render and I've only seen it log out to console once, ever, when it compiled the /movie/[movieId] page for the very first time.I added a custom class to Modal (which is just a fixed div) and it doesn't appear in DOM, so the Modal doesn't get mounted.
Refreshing the page
/movie/12345 takes me to the non-intercepted route aka full page, as expected.Modal
export default function Modal({ children }: { children: React.ReactNode }) {
return (
<div className="fixed modalclass top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
{children}
</div>
);
}Intercepting page
import MovieAssetDetails from "@/components/MovieDetails";
import Modal from "@/components/Modal";
export default function MovieModal({
params,
}: {
params: { movieId: string };
}) {
const { movieId } = params;
console.log("### modal render");
return (
<Modal>
<MovieAssetDetails movieId={movieId} />;
</Modal>
);
}When any Link for
/movie/[movieId] is clicked, there is GET request for that page (like movie/240?_rsc=1tgxz) and the response is[
"development",
[
[
"modal",
"children",
"children",
"(.)movie",
"children",
["movieId", "240", "d"],
[["movieId", "240", "d"], { children: ["__PAGE__", {}] }],
null,
null,
],
],
];so it looks alright, but still, nothing happens. Any ideas? Is it just another of those things that broken with navigation in v14?
Answered by Shy Albatross
Okay, I'm stupid - forgot to add the modal slot to the layout
Case closed.
Case closed.
3 Replies
Shy AlbatrossOP
I cloned https://github.com/vercel-labs/nextgram/tree/main
updated it to Next 14.0.1 and the @modal intercepting route works there. I have pretty much an identical setup and mine doesn't work.
I suspect it's due to suspended components in the layout, or something strange like that.
updated it to Next 14.0.1 and the @modal intercepting route works there. I have pretty much an identical setup and mine doesn't work.
I suspect it's due to suspended components in the layout, or something strange like that.
Shy AlbatrossOP
Okay, I'm stupid - forgot to add the modal slot to the layout
Case closed.
Case closed.
Answer
Shy AlbatrossOP
it doesn't appear in DOM, so the Modal doesn't get mounted.foreshadowing much