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.

[stcore]

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
    }
  }
}

[suksa]

this too will be intercepted

[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

[Reflex2468]

Hi all, I've created a PR (#73390) which adds an intercept attribute which would allow you to opt-out of the intercept. I think it's unlikely to get accepted as of now since there is no RFC yet, but it might help draw some attention to this feature.

[pablojsx]

Might be helpful for some people, this is a specific case but still a hacky solution. I wanted to do what the zillow site does, they intercept routes with a modal to show a house(like instagram), ".com/homedetails/homeId". But, it also works if you navigate to the intercepted route from a different page(let's say home page), and this was my problem.

In their home page there's a carousell, if you click a house it will go to /homedetails/homeId and intercept the route and show a modal with the home details, if you close the modal(go back) you stay in the "search results" page, you don't go back to the home page...

What I did was to navigate to let's say ".com/homedetails" and pass the homeId through a context variable. A useffect in Homedetails will react to the state variable, if it's present or not, and navigate to the intercepted route(lol) so when you go back, you go back to ".com/homedetails" and not to the home page(or any page you want).

It looks ugly because all houses in the carousell will have the same link to ".com/homedetails" but at least it works.

I want to improve this today, I'll edit this comment if I have a better hack for this.

[pablojsx]

Anyways we need a solution for this, it is IMPRESSIVE they have this feature which can't be optionally "bypassed".

[kylerummens]

Building on the Zillow example, I'm needing to send the user to the full page once in the modal. Eg the interception modal is shown, then the user clicks the "expand" button to view the full page.

Doing router.refresh() seems to keep the user inside of the interception modal.

[Joshua10052000]

Here's a solution of mine, it works on me, so maybe it'll help yours.

import * as React from "react";
import LinkPrimatives from "next/link";

interface LinkProps
  extends Omit, "href"> {
  redirectType?: "hard" | "soft";
  href: string;
}

const Link = React.forwardRef(
  ({ className, children, redirectType = "soft", href, ...props }, ref) => {
    const Comp = redirectType === "soft" ? LinkPrimatives : "a";

    return (
      
        {children}
      
    );
  },
);

export { Link };

You can even go crazy and use generic types, that if the redirectType is hard just use the AnchorHTMLAttributes or vice versa.

My scenario is that I separated the route for sign up and sign in page. My goal outcome is simple, if the current page I am is authRoutes, do a hard redirect, else nextjs can intercept it.

Here's how I implemented it.

<Link redirectType={authRoutes.includes(pathname ?? "") ? "hard" : "soft"} href="/auth/signin"> <User2Icon /> <span>Sign In</span> </Link>