260322:1648 Correct Coresspondence / Doing RFA / Correct CI

2026-03-22 16:48:12 +07:00
parent e5deedb42e
commit 11984bfa29
683 changed files with 105251 additions and 29068 deletions
@@ -24,13 +24,7 @@ app/

 ```tsx
 // app/layout.tsx
-export default function RootLayout({
-  children,
-  modal,
-}: {
-  children: React.ReactNode;
-  modal: React.ReactNode;
-}) {
+export default function RootLayout({ children, modal }: { children: React.ReactNode; modal: React.ReactNode }) {
  return (
    <html>
      <body>
@@ -63,11 +57,7 @@ The `(.)` prefix intercepts routes at the same level.
 // app/@modal/(.)photos/[id]/page.tsx
 import { Modal } from '@/components/modal';

-export default async function PhotoModal({
-  params
-}: {
-  params: Promise<{ id: string }>
-}) {
+export default async function PhotoModal({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const photo = await getPhoto(id);

@@ -83,11 +73,7 @@ export default async function PhotoModal({

 ```tsx
 // app/photos/[id]/page.tsx
-export default async function PhotoPage({
-  params
-}: {
-  params: Promise<{ id: string }>
-}) {
+export default async function PhotoPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const photo = await getPhoto(id);

@@ -127,11 +113,14 @@ export function Modal({ children }: { children: React.ReactNode }) {
  }, [router]);

  // Close on overlay click
-  const handleOverlayClick = useCallback((e: React.MouseEvent) => {
-    if (e.target === overlayRef.current) {
-      router.back(); // Correct
-    }
-  }, [router]);
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === overlayRef.current) {
+        router.back(); // Correct
+      }
+    },
+    [router]
+  );

  return (
    <div
@@ -156,11 +145,13 @@ export function Modal({ children }: { children: React.ReactNode }) {
 ### Why NOT `router.push('/')` or `<Link href="/">`?

 Using `push` or `Link` to "close" a modal:
+
 1. Adds a new history entry (back button shows modal again)
 2. Doesn't properly clear the intercepted route
 3. Can cause the modal to flash or persist unexpectedly

 `router.back()` correctly:
+
 1. Removes the intercepted route from history
 2. Returns to the previous page
 3. Properly unmounts the modal
@@ -169,18 +160,19 @@ Using `push` or `Link` to "close" a modal:

 Matchers match **route segments**, not filesystem paths:

-| Matcher | Matches | Example |
-|---------|---------|---------|
-| `(.)` | Same level | `@modal/(.)photos` intercepts `/photos` |
-| `(..)` | One level up | `@modal/(..)settings` from `/dashboard/@modal` intercepts `/settings` |
-| `(..)(..)` | Two levels up | Rarely used |
-| `(...)` | From root | `@modal/(...)photos` intercepts `/photos` from anywhere |
+| Matcher    | Matches       | Example                                                               |
+| ---------- | ------------- | --------------------------------------------------------------------- |
+| `(.)`      | Same level    | `@modal/(.)photos` intercepts `/photos`                               |
+| `(..)`     | One level up  | `@modal/(..)settings` from `/dashboard/@modal` intercepts `/settings` |
+| `(..)(..)` | Two levels up | Rarely used                                                           |
+| `(...)`    | From root     | `@modal/(...)photos` intercepts `/photos` from anywhere               |

 **Common mistake**: Thinking `(..)` means "parent folder" - it means "parent route segment".

 ## Handling Hard Navigation

 When users directly visit `/photos/123` (bookmark, refresh, shared link):
+
 - The intercepting route is bypassed
 - The full `photos/[id]/page.tsx` renders
 - Modal doesn't appear (expected behavior)
@@ -230,6 +222,7 @@ app/
 ### 4. Intercepted Route Shows Wrong Content

 Check your matcher:
+
 - `(.)photos` intercepts `/photos` from the same route level
 - If your `@modal` is in `app/dashboard/@modal`, use `(.)photos` to intercept `/dashboard/photos`, not `/photos`

@@ -272,7 +265,7 @@ export default async function Gallery() {

  return (
    <div className="grid grid-cols-3 gap-4">
-      {photos.map(photo => (
+      {photos.map((photo) => (
        <Link key={photo.id} href={`/photos/${photo.id}`}>
          <img src={photo.thumbnail} alt={photo.title} />
        </Link>