Problem with Next.js Interception route

Answered

Razorbill posted this in #help-forum

RazorbillOP

2024-12-09T15:38:07.334Z

I am using next.js v15 app router.
I have a button in page.tsx
When clicking that button I want to show this route [id]/page.tsx as modal on the page.
When I refresh the page, I want to show the modal, not standalone page.
How can I implement this approach?

Answered by Brown bear

You want work-requests/page.tsx to render for sub-routes as well, i.e. under this modal. I think the simplest way to do it is by moving it's contents to a layout file, as this is the purpose of the layout file. You could do so by doing something like this:

app/
├─ work-requests/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ [codename]/[id]/
│  │  ├─ page.tsx

with work-requests/layout.tsx containing your current work-requests/page.tsx contents and also rendering children, work-requests/page.tsx rendering nothing, but allowing the route to be accessed (i.e., the url example.com/work-requests renders work-requests/layout.tsx and work-requests/page.tsx), and the modal in [codename]/[id]/page.tsx.

View full answer

86 Replies

Brown bear

2024-12-09T15:48:38.513Z

It sounds like you don't want an interception route at all. When you refresh the page, you want it to show the modal on top of the same [id]/page.tsx?

West African Lion

2024-12-09T15:58:45.881Z

In that case, you don't need to use interception route, btw if you wanna still use that, you can implement the modal(open) in the default.tsx.

Brown bear

2024-12-09T15:59:18.319Z

If that is the case, the modal route needs to know the [id] as well. I think the best way to do so is with parallel routes, putting the modal at /[id]/modal or something like that.

app/
├─ [id]/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ @modal/
│  │  ├─ default.tsx
│  │  ├─ modal/
│  │  │  ├─ page.tsx

in the default parallel route, render nothing. In the modal/ one, render the modal.

RazorbillOP

2024-12-09T16:08:30.344Z

@Brown bear
Why I have to use modal/page.tsx? Can I use page.tsx directly in @modal?

Brown bear

2024-12-09T16:11:27.495Z

no; @modal creates the parallel route, meaning [id]/layout.tsx will get an additional param called modal containing whatever routes match in @modal. That's why you have @modal/default.tsx and @modal/modal/page.tsx. The route is what maters for the URL. if you wanted the modal at [id]/login or [id]/edit you would use @modal/login/page.tsx or @modal/edit/page.tsx instead.

I forgot to mention the [id]/layout.tsx file. You would change it to render both children and modal.

RazorbillOP

2024-12-09T16:12:09.704Z

What will be the url to access that modal in that case?

Brown bear

2024-12-09T16:13:07.086Z

[id]/modal, [id]/login, or [id]/edit depending on the contents of the @modal folder. See the parallel routes page for more info https://nextjs.org/docs/app/building-your-application/routing/parallel-routes

I also may be wrong here; I'm not sure the behavior of parallel routes on the [id]/page.tsx

West African Lion

2024-12-09T16:13:40.397Z

Maybe the reason why you want to use interception route is route.

@Brown bear, in your case, the modal should be removed in the @modal.

app/
├─ [id]/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ @modal/
│  │    ├─ page.tsx

Brown bear

2024-12-09T16:14:30.466Z

in that case, the modal would always show.

RazorbillOP

2024-12-09T16:14:45.353Z

This is the my project structure

Brown bear

2024-12-09T16:14:53.753Z

Unless you added conditional rendering to it or something. Prince, can you explain what you want the end result to be?

RazorbillOP

2024-12-09T16:15:13.385Z

So I want to show modal over work-requests/page.tsx

Brown bear

2024-12-09T16:15:21.444Z

And when they refresh?

RazorbillOP

2024-12-09T16:15:30.229Z

Still shows modal when refresh

Brown bear

2024-12-09T16:15:46.923Z

still shows the modal over the same [codename]/[id]?

or, just shows the modal over the work requests page?

RazorbillOP

2024-12-09T16:16:14.030Z

[codename]/[id] is modal route. I want to show that modal on work-requests/page.tsx when refresh

Brown bear

2024-12-09T16:17:30.276Z

ok. So, user is on work-requests, goes to work-requests/[codename]/[id], and you want it to show a modal over the top of the work-requests page. Then, when they refresh or directly visit work-requests/[codename]/[id], it should still show the modal over the work-requests page?

RazorbillOP

2024-12-09T16:18:23.744Z

Corret

West African Lion

2024-12-09T16:18:55.994Z

@Razorbill, so in that case, what do you want to show when the user click history back?

Brown bear

2024-12-09T16:21:43.030Z

In this case, I think what I explained earlier is correct. So, you would:
1. make a folder work-requests/@modal
2. move your [codename]/[id] into that folder
3. add a default.tsx to that folder that renders nothing
4. Add work-requests/layout.tsx, which will recieve props { children, modal} and render both.

West African Lion

2024-12-09T16:21:46.899Z

work-requests page or work-requests/[codename]/[id] page with hidden modal?

Brown bear

2024-12-09T16:22:33.373Z

When you visit work-requests, the layout will recieve whatever work-requests/@modal/default.tsx renders, and will recieve work-requests/page.tsx for children.

When you visit work-requests/[codename]/[id], layout will recieve whatever work-requests/[codename]/[id]/page.tsx renders for modal, and work-requests/page.tsx for children.

West African Lion

2024-12-09T16:23:52.777Z

So if you want to show the modal still even the user refresh the current page.
You have to implement the opened modal in the default.tsx.

And for this you have to use interception route.

RazorbillOP

2024-12-09T16:25:12.844Z

I tried this but it didn't work

Brown bear

2024-12-09T16:25:23.862Z

I don't think that's what they're asking Demi. It sounds like there is no modal when they are on work-requests and only when at work-requests/[codename]/[id] should a modal appear, specifically ABOVE whatever work-requests is showing, and should remain even when refreshing.

West African Lion

2024-12-09T16:25:47.533Z

@Brown bear, you forgot to mention about the interception route.

RazorbillOP

2024-12-09T16:26:10.269Z

I want to show work-requests/page.tsx when history back

Brown bear

2024-12-09T16:26:10.391Z

Demi, I dont think an interception route is appropriate, because it should render the SAME thing regardless of how it's reached.

West African Lion

2024-12-09T16:27:18.756Z

Let's point that the route.

We can solve the modal opened when the user refresh using the default.tsx.

Default, the default.tsx returns nulll.

But in this case, @Razorbill should render the opened modal in the default.tsx

Except this, the others are same as interception route.

Of course, @Razorbill have to use parallel route too.

RazorbillOP

2024-12-09T16:29:11.482Z

I did like this but getting 404 error

Brown bear

2024-12-09T16:29:26.295Z

getting 404 on what URL?

oh oh,

RazorbillOP

2024-12-09T16:29:39.562Z

/work-requests/[codename]/[id]

West African Lion

2024-12-09T16:29:39.584Z

Just a sec, I will show you something.

Brown bear

2024-12-09T16:29:45.135Z

default.tsx should go directly in @modal

RazorbillOP

2024-12-09T16:30:11.957Z

Still showing 404 page

West African Lion

2024-12-09T16:30:51.154Z

Brown bear

2024-12-09T16:31:23.596Z

ah, I think that I was wrong on how children behaves. Could you rename work-requests/page.tsx to work-requests/default.tsx?

RazorbillOP

2024-12-09T16:32:25.513Z

In this approach, it shows [codename]/[id]/page.tsx when refresh, and shows @modal/(.)/[id]/page.tsx when navigating. I don't want that

West African Lion

2024-12-09T16:33:09.408Z

@modal/(.)/[id]/page.tsx ?

@modal/(.)[id]/page.tsx

RazorbillOP

2024-12-09T16:33:22.031Z

That doesn't work
It shows 404 page on /work-requests

Brown bear

2024-12-09T16:33:53.584Z

ok. If you duplicate page.tsx to default.tsx; Also, I think we may be overcomplicating this. let me write something out.

RazorbillOP

2024-12-09T16:34:26.113Z

I don't think I have to update /work-requests/page.tsx

There's no problem with that file

Brown bear

2024-12-09T16:34:41.360Z

yeah, just copy that file

to work-requests/default.tsx

and if it works, you can refactor it's contents to share it between both. I'm not 100% sure tho

RazorbillOP

2024-12-09T16:39:00.811Z

But it doesn't work

@modal/[codename]/[id]/page.tsx

Here's the modal content I want to show over /work-requests/page.tsx

Brown bear

2024-12-09T16:40:00.330Z

app/
├─ work-requests/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ [codename]/[id]/
│  │  ├─ page.tsx

Answer

RazorbillOP

2024-12-09T16:41:11.014Z

lol, if I have another page under work-requests, then how? Use another sub-routes for that? 🤣

Brown bear

2024-12-09T16:42:24.973Z

If work-requests has other routes which should NOT render the work requests page, for example work-requests/options or seomething of the sort, you could use a route group so that the layout will not render for those, and will only render for the other routes.

app/
├─ work-requests/
│  ├─ (modal)
│  │  ├─ layout.tsx
│  │  ├─ page.tsx
│  │  ├─ [codename]/[id]/
│  │  │  ├─ page.tsx
│  ├─ (non-modal)
│  │  ├─ ... other subroutes

and (non-modal) shouldn't contain any matching routes for work-requests/; only for subroutes like work-requests/options etc.

RazorbillOP

2024-12-09T16:46:31.428Z

Showing page content in layout.tsx is not the best practice. I hope there's another way

Brown bear

2024-12-09T16:48:51.504Z

You could make work-requests/page.tsx a optional catch-all route, and then programatically show the modal. i.e. work-requests/[[...path]]/page.tsx

Brown bear

2024-12-09T16:54:58.856Z

I jsut went and tested it myself, this is what worked for me.

RazorbillOP

2024-12-09T16:55:47.420Z

can you please show what you updated?

Brown bear

2024-12-09T17:00:30.227Z

1. localhost:3000/test shows the contents of /test/page.tsx and /test/@modal/default.tsx
2. localhost:3000/test/modal shows the contents of /test/modal/page.tsx and /test/@modal/modal/page.tsx

I modified it to use a common component for both /test/page.tsx and /test/modal/page.tsx because that's what you want to do. I'll upload a gist and share it

Brown bear

2024-12-09T17:07:47.268Z

https://gist.github.com/6TELOIV/fbe8938a32bb33fedc9dd88ddffb0bd8

the files are commented at the top where they go

West African Lion

2024-12-09T17:14:01.023Z

So @Brown bear, is it working in your case?

Brown bear

2024-12-09T17:14:53.843Z

yes.

RazorbillOP

2024-12-09T17:23:06.854Z

I followed that @Brown bear

Brown bear

2024-12-09T17:33:05.153Z

Here's one more way to do it. This would be if you want a common backdrop page for the modal, and potentially you have multiple modals. I've attached screenshots showing the behavior

West African Lion

2024-12-09T17:47:57.303Z

@Brown bear, please check this code.

West African Lion

2024-12-09T18:01:33.206Z

Using this way, we can implement the purpose also, but in this case, we can use the advantages of interception route such as route back, and show modal and full screen modal when the user refresh.

Brown bear

2024-12-09T18:08:22.462Z

I think your implementation is fine, but not what Prince asked for. Prince explicitly wants the behavior to be the SAME, regardless of whether the user gets to the modal from work-requests or directly navigates to it (i.e, on refresh). In the case of what Prince wants, intercept routes are not applicable, because the behavior needs to be the same, regardless of how the user reaches the route.

West African Lion

2024-12-09T18:11:32.704Z

Yes, agree.

But using this way, we can acheive @Razorbill's purpose also.

After refreshing.

Using this, we can improve ux.