Unable to understand Modals through Intercepting Routes and parallel routes

Answered

Lanceolated Warbler posted this in #help-forum

Lanceolated WarblerOP

2024-09-29T02:33:42.581Z

I have the following folder structure as shown in the image
however, whenever i click on a store, i go straight to the page /store/id instead of the route being intercepted and showing a modal

What am I doing wrong?

Answered by Lanceolated Warbler

View full answer

77 Replies

Jboncz

2024-09-29T02:34:52.716Z

This is how it should be setup

and your layout should look like this

Heres a reproduction

need to install the modules when you open it using npm i

but you can look through the code without running it.

Lanceolated WarblerOP

2024-09-29T02:38:59.473Z

lemme give it a try

Jboncz

2024-09-29T02:39:51.765Z

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals always can folllow these docs if thats easier

its a somewhat confusing nesting of routing schemes

Lanceolated WarblerOP

2024-09-29T02:40:50.341Z

Ok so ive changed the setup

This should work right?

Jboncz

2024-09-29T02:41:23.553Z

whenever I click on store what does that look like?

Lanceolated WarblerOP

2024-09-29T02:41:45.780Z

it sends me to /stores/1

Jboncz

2024-09-29T02:41:59.341Z

Is that in the layout?

Lanceolated WarblerOP

2024-09-29T02:42:14.779Z

import "./globals.css";

export default function RootLayout({
  children, modal
}: Readonly<{
  children: React.ReactNode;
  modal: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}
        {modal}
        <div id="modal-root" />
      </body>
    </html>
  );
}

here is the root layout

i have /stores which has the layout and links to /stores/1 etc

Jboncz

2024-09-29T02:42:50.678Z

So the actual navigation portion has to be in the layout otherwise the paralel route wont work right.

Lanceolated WarblerOP

2024-09-29T02:43:02.865Z

wtf

Jboncz

2024-09-29T02:43:06.266Z

yerp

😂

Lanceolated WarblerOP

2024-09-29T02:43:12.030Z

so i need to have the <Link> tags in layout.tsx?

Jboncz

2024-09-29T02:43:19.025Z

At least as far as I can see in my testing

Lanceolated WarblerOP

2024-09-29T02:43:19.863Z

thats stupid ash

Jboncz

2024-09-29T02:43:34.000Z

I just started trying to help someone else with this.... and its been.... confusing

all the documentation says to put the navigation stuff in layout

Lanceolated WarblerOP

2024-09-29T02:43:46.242Z

yeah i really want to stick with nextjs but the docs dont provide all of this

it does? i've read it over and over again for 2 days

the parallel routing and intercepting routes must be my most viewed in history

wait thats not true

I downloaded nextgram repo and ran it and it works just fine

import './global.css';

export const metadata = {
  title: 'NextGram',
  description:
    'A sample Next.js app showing dynamic routing with modals as a route.',
};

export default function RootLayout(props: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {props.children}
        {props.modal}
        <div id="modal-root" />
      </body>
    </html>
  );
}

This is the root layout for that

All the links are in the page.tsx

Jboncz

2024-09-29T02:46:21.688Z

can you link it to me?

I was looking at the actual documentation and it always shows it in layout.

I got it

looking

Oh yeah that does work, in my example I sent you it even works

Lanceolated WarblerOP

2024-09-29T02:50:04.202Z

holy heck wait

it worked for me

Jboncz

2024-09-29T02:50:10.186Z

Lanceolated WarblerOP

2024-09-29T02:50:16.893Z

Answer

Lanceolated WarblerOP

2024-09-29T02:50:25.241Z

this exact struct worked for me

oh it makes so much sense now xD

Jboncz

2024-09-29T02:55:30.031Z

It doesnt make sense to me at all I think the whole thing is convoluted lol

I mean it does, I understand how it works... its just convoluted and could have better dx

Lanceolated WarblerOP

2024-09-29T02:58:35.528Z

yeah

dx could've been way better

i think its just because of how server and client is so separated in reality but smushed together in next it becomes hard

Jboncz

2024-09-29T02:59:07.703Z

but hey glad you got it working.

Lanceolated WarblerOP

2024-09-29T02:59:14.382Z

yup, thank you!

couldnt have done it without you

Jboncz

2024-09-29T02:59:39.160Z

np please mark the answer when you get a sec just so it closes! 🙂

Lanceolated WarblerOP

2024-09-29T03:01:03.698Z

done!

Jboncz

2024-09-29T03:01:10.578Z

Sounds good, GL going forward!

@Lanceolated Warbler `import './global.css'; export const metadata = { title: 'NextGram', description: 'A sample Next.js app showing dynamic routing with modals as a route.', }; export default function RootLayout(props: { children: React.ReactNode; modal: React.ReactNode; }) { return ( <html> <body> {props.children} {props.modal} <div id="modal-root" /> </body> </html> ); }` This is the root layout for that

Masai Lion

2024-10-02T14:20:29.707Z

Wait, so is it necessary to include the modal prop in the layout?

Lanceolated WarblerOP

2024-10-02T14:20:51.978Z

Yes

Without the modal prop in the layout, nextjs doesnt know where to show it

@Lanceolated Warbler Yes

Masai Lion

2024-10-02T14:27:10.170Z

Okay, so I added the modal to my root layout:

export default function RootLayout({
  children, modal
}: Readonly<{
  children: React.ReactNode;
  modal: React.ReactNode;
}>) {
  return (
    <html lang="en" className="overflow-x-hidden">
      <body className={`${hero2.variable} ${body.variable} ${header1.variable} ${hero1.variable} bg-colour overflow-x-hidden m-0 p-0 flex flex-col min-h-screen`}>
        <MainHeader links={[{ route: "/", text: "Home" }, { route: "/gallery/cakes", text: "Gallery" }, { route: "/quote", text: "Request a quote" }]} />
        <main className="flex-grow">
          {children}
          {modal}
        </main>
        <Footer />
      </body>
    </html>
  );
}export default function RootLayout({
  children, modal
}: Readonly<{
  children: React.ReactNode;
  modal: React.ReactNode;
}>) {
  return (
    <html lang="en" className="overflow-x-hidden">
      <body className={`${hero2.variable} ${body.variable} ${header1.variable} ${hero1.variable} bg-colour overflow-x-hidden m-0 p-0 flex flex-col min-h-screen`}>
        <MainHeader links={[{ route: "/", text: "Home" }, { route: "/gallery/cakes", text: "Gallery" }, { route: "/quote", text: "Request a quote" }]} />
        <main className="flex-grow">
          {children}
          {modal}
        </main>
        <Footer />
      </body>
    </html>
  );
}

I'll send my folder strucutre now

but now I get this problem

Lanceolated WarblerOP

2024-10-02T14:28:45.801Z

Do you have a page.tsx in your (.)[image_id]

Masai Lion

2024-10-02T14:30:07.646Z

I do, in both the (.)[image_id] and the [image_id] folder

Masai Lion

2024-10-02T14:44:32.179Z

so I have that setup and in my terminal it says that it is compiling the intercepting route, however, on the client side I get that error I previously showed

Masai Lion

2024-10-03T05:28:26.222Z

I updated next and I no longer get the client-side error, however, now my modal is not displaying at all for some reason? v0 suggests that I need to add a 'show' prop to the modal component to determine when it should be displayed but I don't feel like that is necessary

Lanceolated WarblerOP

2024-10-07T17:57:59.435Z

Hey you still there? Sorry, I couldn't get back to you earlier @Masai Lion

Masai Lion

2024-10-07T18:54:54.027Z

Yea, I still have not been able to sort it out

@Lanceolated Warbler I downloaded nextgram repo and ran it and it works just fine

Masai Lion

2024-10-09T13:24:34.167Z

Can you tell me what nextgram is?

Lanceolated WarblerOP

2024-10-09T15:09:24.422Z

Its hosted on vercels github

You can find the link in the docs for I think intercepting routes or parallel routes i don’t remember which

Odorous house ant

2024-10-09T15:49:39.765Z

I have the same problem 😦

- app (root)
- go → Client Profiles
- [restaurant_slug] → Renders each restaurant information and some menu cards.
- [menu_slug] → Renders a particular menu from that restaurant.
- [product_slug] → Renders a particular product from that restaurant.
- app → Dashboard
- (marketing) → Landings

Want to render menu_slug page as a modal if user clicks on menu from the restaurant page, and same thing with product... but can't find the solution....

I got it to work and intercept the route by placing @modal/(..)go/[menu_slug] directly under “go” folder, but I obviously wasn’t able to get the menu information from the context as the context was in [restaurant_slug]/layout.tsx instead of inside go/layout.tsx.

Masai Lion

2024-10-10T13:07:11.719Z

I finally figured my shit out

holy molly that shit feels good

@Odorous house ant I have the same problem 😦 > - app (root) > - go → Client Profiles > - [restaurant_slug] → Renders each restaurant information and some menu cards. > - [menu_slug] → Renders a particular menu from that restaurant. > - [product_slug] → Renders a particular product from that restaurant. > - app → Dashboard > - (marketing) → Landings Want to render menu_slug page as a modal if user clicks on menu from the restaurant page, and same thing with product... but can't find the solution.... I got it to work and intercept the route by placing @modal/(..)go/[menu_slug] directly under “go” folder, but I obviously wasn’t able to get the menu information from the context as the context was in [restaurant_slug]/layout.tsx instead of inside go/layout.tsx.

Masai Lion

2024-10-10T13:10:55.715Z

So my issue was with how my folder structure. In one of my previous screen shots, I had a route for 'gallery' however, gallery was just there to make the url look "cleaner" once I extracted the dynamic routes from the redundant 'gallery' it worked. Is your 'go' route exporting any page?

This is my current setup

@Masai Lion Click to see attachment

Masai Lion

2024-10-10T13:12:25.916Z

Compared to this

I hope that helps a little

Odorous house ant

2024-10-10T14:33:08.853Z

I got it to work my way with some workarounds which weren't ideal, but now that I've tried your folder structure works perfectly 😇

Thank you so much man! @Masai Lion

Lanceolated WarblerOP

2024-10-11T17:31:31.518Z

They really need to make it easier to implement modals