initial

joplin notion extension/Web Development/React/next/Coding 6(Intercepting Routes).md

@@ -0,0 +1,139 @@
+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>;
+}
+
+```