Coding 6(Intercepting Routes)

# 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
  ![a7d0a4ecdd2ac1a4b1c7fedd140f2c08.png](../../../../_resources/a7d0a4ecdd2ac1a4b1c7fedd140f2c08.png)
  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
```text
src/app
	f1
		(.)f2
			page.jsx
		f2
			page.jsx
		page.jsx
```
In `src/app/f1/page.jsx`
```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`
```jsx
export default function F2() {
  return (
    <>
      <h1>F2 Page</h1>
    </>
  );
}

```
In `src/app/f1/(.)f2/page.jsx`
```jsx
export default function F2() {
  return (
    <>
      <h1>(.) Intercepted F2 Page</h1>
    </>
  );
}

```
- (..) to match segments one level above
```text
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`
```jsx
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
```text
src/app
	about
		intro
			page.jsx
	f1
		f4
			page.jsx
		(...)about
			intro
				page.jsx
```
In `src/app/f1/f4`
```jsx
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`
```jsx
export default function Intro() {
  return (
    <>
      <h1>(...) Intercepted Intro</h1>
    </>
  );
}

```
In  `src/app/about/intro` 
```jsx
export default function Intro() {
  return <h1>Intro</h1>;
}

```