intercepting route transition to full page

[gritty folio]

I was able to setup a intercepting route into a modal but I would I like to know how to add a button to let the user make the modal transition to the full real page if the user wish to. How to do it ?

[obsidian wadi]

Hi @gritty folio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can achieve this by creating a separate utility function that redirects to the full page. Here's an example of how you can do it:

"use server";
import { redirect } from "next/navigation";

export default async function redirectHard(uri) {
  redirect(uri);
}

You can then call this function from your client component when the button is clicked. This function will redirect the user to the full page view of the modal content.

Here's the source of this solution: Github Issue (open): App Dir: Avoid intercepted route for hard navigated page > Comments Part 4 (https://github.com/vercel/next.js/issues/51648)

Also, you might want to consider using the bypassRouteInterception property in the <Link> component. This property preloads and redirects to the original product page. Here's an example:

<Link href={`/product/${id}`} bypassRouteInterception>See full details</Link>

This solution was discussed here: Github Issue (open): App Dir: Avoid intercepted route for hard navigated page > Comments Part 4 (https://github.com/vercel/next.js/issues/51648)

Remember to replace /product/${id} with the path to your full page.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@gritty folio kapa.ai is still learning and improving, please let us know how it did by reacting below