Conditionally intercept route

[Alexandredc]

Goals

I would like to disable a route interception based on a condition.

Background

Here is my use case :
Intercept a route to create a modal only for desktop users. If the user is browsing on a mobile device, I do not want the route to be intercepted and the modal should not be shown.

Proposal

Here is a proposal :

Maybe we could pass a parameter to the <Link> component to disable the interception behaviour.

[Alexandredc]

Any news about this proposal ? Thanks !

[smakman]

Would also like to be able to disable route interception on a per link basis.

[eeulogi1999]

I think with fair reason I should make a solution for this, especially when working with modal!

[olliejm]

I would also like to avoid route intercepting on mobile, but additionally I want to avoid route interception depending upon the route at which the navigation starts.

I have a grid of items at one route and would like to intercept when linked from there to show a preview modal, however links elsewhere on the site to the items should load the full page and not pop a modal up.

Anyone know if there's another workaround for that second use case currently?

[danielpetho]

Same here. My current solution is to use hard navigate on mobile but it's not ideal.

[bwcr]

I would like to know the solution as well

[khuezy]

This would be great to have, my use case isn't for desktop/mobile, but a nested path. Eg, when a user goes directly to /photos/69/details, I want to <Link noIntercept href="/photos/69">. Since the user is already deep into the app, having the modal show up when they jump up/backwards doesn't feel right.

[abergenw]

I have a similar need but for a different use case here: #60354

[tranhuuphucuong]

I also have a similar yet very basic use case. Eg, the login, signup, forgot password. when you navigate to log in as a link, it shows the page, and then you click forgot password to reset the password it should show the page and not the modal. Also on the mobile, I don't want to show any modal

[clearly-outsane]

I have a case for this because I wouldn't want it intercepted on mobile.

[ttaccp]

This is my mobile solution.

<Link href="/redirect?url=/photo/{photoId}" rel="nofollow" className="sm:invisible">photo page</Link>
<Link href="/photo/{photoId}" className="invisible sm:visible">photo page</Link>

app/redirect/page.tsx

import type { Metadata } from "next";
import { redirect } from "next/navigation";

export default function Page({ searchParams }: { searchParams: { url: string } }) {
  redirect(searchParams.url)
}

export function generateMetadata(): Metadata {
  return {
    robots: {
      index: false,
      follow: false
    }
  }
}

[dx1ded]

+1, any updates?

[programming-with-ia]

+1

[weizhe412]

Any updates?
I feel like it's pretty common that we want a intercepting route modal on the desktop but directly goto an another page on the mobile

[programming-with-ia]

I am facing that issue. If anyone has a solution, please let me know.

[olliejm]

Would be reassuring to get some official acknowledgement at least that this is a common concern. It does feel like a requirement that's likely to be hit by the vast majority of use cases for intercepted routes, kind of surprising it wasn't addressed already when the feature was launched