Intercepting Routes

Intercepting routes allow us to intercept or stop the default routing behaviour to present alternative view when navigating through UI, while still preserving the intended route So it is useful when we wanna show a route while keeping context of current page As we can see that when clicked on image, rest of page is blurred and that image is overlayed over others while keeping rest of page/images in background. When page reloads or when we share the link to someone else the original image is shown and rest of page contents is lost.

Intercepting routes conventions

(.) to match segments on the same level Structure

src/app
	f1
		(.)f2
			page.jsx
		f2
			page.jsx
		page.jsx

In src/app/f1/page.jsx

import Link from "next/link";

export default function F1() {
  return (
    <>
      <h1>F1 Page</h1>
      <Link href={"/f1/f2"}>F2</Link>
    </>
  );
}

In src/app/f1/f2/page.jsx

export default function F2() {
  return (
    <>
      <h1>F2 Page</h1>
    </>
  );
}

In src/app/f1/(.)f2/page.jsx

export default function F2() {
  return (
    <>
      <h1>(.) Intercepted F2 Page</h1>
    </>
  );
}

(..) to match segments one level above

src/app
	f1
		(.)f2
			page.jsx
		f2
			page.jsx
		
		f3
			page.jsx
		f4
			(..)f3
				page.jsx
			page.jsx
		page.jsx

We can keep intercepted route of f3 inside folder f1 instead of inside f4 too and we wont need (..) too as (.) would suffice but when using lyout or template it is helpful to keep inside f4 rather inthan inside f1. In src/app/f1/f4

import Link from "next/link";

export default function F4() {
  return (
    <>
      <h1>F4 Page</h1>
      <Link href={"/f1/f3"}>F3</Link>
    </>
  );
}

Same for src/app/f1/f3 and src/app/f1/f4/(..f3) with their respective page name

(..)(..) to catch segments two level above. But this may have some issues
(...) to match segments from the root app directory Structure

src/app
	about
		intro
			page.jsx
	f1
		f4
			page.jsx
		(...)about
			intro
				page.jsx

In src/app/f1/f4

import Link from "next/link";

export default function F4() {
  return (
    <>
      <h1>F4 Page</h1>
      <Link href={"/about/intro"}>Intro</Link>
    </>
  );
}

In src/app/f1/f4/(...)about/intro/page.jsx

export default function Intro() {
  return (
    <>
      <h1>(...) Intercepted Intro</h1>
    </>
  );
}

In src/app/about/intro

export default function Intro() {
  return <h1>Intro</h1>;
}

2.6 KiB Raw Permalink Blame History

Intercepting Routes

Intercepting routes conventions

2.6 KiB

Raw Permalink Blame History