How to intercept routes from / page only?
Unanswered
Pacific herring posted this in #help-forum
Pacific herringOP
Hi everyone! I'm trying to intercept the /portfolio/project/[slug] route from main page (/) ONLY. With the following structure I've already accomplished that (picture):
The issue is that other routes that lead to that specific route also get intercepted which I don't want. For example, when I'm on /portfolio and click on one of the /portfolio/project/[slug] links, it gets intercepted and dialog window opens. Is there any native way to fix it? Thanks!
The issue is that other routes that lead to that specific route also get intercepted which I don't want. For example, when I'm on /portfolio and click on one of the /portfolio/project/[slug] links, it gets intercepted and dialog window opens. Is there any native way to fix it? Thanks!
15 Replies
Pacific herringOP
help plz
your option is to use middleware
Pacific herringOP
@"use php"
Thanks for the reply! Can u give an example please?
Thanks for the reply! Can u give an example please?
Pacific herringOP
Yeah but how would I use middleware for my case? The only way I see it is basically checking if a request for
/portfolio/project/[slug] comes from / (in this case I would intercept it and show the dialog window), and if it's anything else (like /portfolio) then simply redirect to the /portfolio/project/[slug] page. Is it what u meant?umm, then
if you want to show a dialog, then it wouldn't really work
What I'd do is:
- Create another Client Component
- Add it inside layout.tsx
- From that client component, check the route
- Show the Dialog depending upon the route
This might not be the most efficient solution
- Create another Client Component
- Add it inside layout.tsx
- From that client component, check the route
- Show the Dialog depending upon the route
This might not be the most efficient solution
You can check this out: https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes
Pacific herringOP
It might be the way, imma try it rn
Pacific herringOP
I guess it's not gonna work for me. The thing is, for a dialog I would obviously need a parallel route (@dialog) to render it alongside the page content. If I put inside
/portfolio as it's shown in what AI generated, I won't be able to pass it to root layout as it gets to the nearest layout.tsx which is gonna be /portfolio/layout.tsx@Pacific herring I guess it's not gonna work for me. The thing is, for a dialog I would obviously need a parallel route (@dialog) to render it alongside the page content. If I put inside `/portfolio` as it's shown in what AI generated, I won't be able to pass it to root layout as it gets to the nearest `layout.tsx` which is gonna be `/portfolio/layout.tsx`
Barbary Lion
Can you maybe add a origin via props/params? And check if the origin is "/"
@Barbary Lion Can you maybe add a origin via props/params? And check if the origin is "/"
Pacific herringOP
That's actually what I'm trynna do right now. Basically when the intercepted page gets rendered I would check if the origin was
/ and if not I would simply call router.refresh that would render the actual page instead of dialog. However, I can't find any ways to get that "origin path". useRouter doesn't return anything like that, I only see window.history.state but it says "NEXTJS_INTERNAL", there's no way I can use it.