App Router ਵਿੱਚ ਫਾਈਲ-ਆਧਾਰਿਤ ਰੂਟਿੰਗ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ?

Question

Accepted Answer

App Router ਵਿੱਚ, **`app/` ਦੇ ਅੰਦਰ ਫੋਲਡਰ ਦੀ ਸੰਰਚਨਾ ਆਪਣੇ ਰੂਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ** — ਕੋਈ ਰਾਊਟਰ ਸੰਰਚਨਾ ਲਿਖਣੀ ਨਹੀਂ ਹੈ। ਹਰ ਫੋਲਡਰ ਇੱਕ URL ਸੈਗਮੈਂਟ ਹੈ, ਅਤੇ ਇਸ ਦੇ ਅੰਦਰ ਵਿਸ਼ੇਸ ਫਾਈਲਾਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀਆਂ ਹਨ ਕਿ ਉਹ ਸੈਗਮੈਂਟ ਕੀ ਰੈਂਡਰ ਕਰਦਾ ਹੈ। ## ਫੋਲਡਰ = URL ਸੈਗਮੈਂਟ ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (dynamic segment) shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL) ``` ## ਵਿਸ਼ੇਸ ਫਾਈਲਾਂ ਹਰ ਫੋਲਡਰ ਵਿੱਚ ਰਾਖਵੀਆਂ ਫਾਈਲ ਦੇ ਨਾਮ ਹੋ ਸਕਦੇ ਹਨ, ਹਰ ਇੱਕ ਦੀ ਆਪਣੀ ਭੂਮਿਕਾ ਹੈ: ```text page.tsx → the route's UI (REQUIRED to make a segment routable) layout.tsx → shared wrapper that persists across child routes loading.tsx → loading UI (auto-wraps the page in ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## ਗਤੀਸ਼ੀਲ ਸੈਗਮੈਂਟ ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` ਵਰਗ ਬ੍ਰੈਕਟ ਇੱਕ ਗਤੀਸ਼ੀਲ ਪੈਰਾਮੀਟਰ ਬਣਾਉਂਦੇ ਹਨ ਜੋ `params` ਦੁਆਰਾ ਪੰਨੇ ਨੂੰ ਭੇਜਿਆ ਜਾਂਦਾ ਹੈ। ਭਿੰਨਤਾਵਾਂ: `[...slug]` (catch-all), `[[...slug]]` (ਵਿਕਲਪਿਕ catch-all)। ## ਰੂਟ ਗਰੁੱਪ ਅਤੇ ਸੰਗਠਨ ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` ਬ੍ਰੈਕਟ **ਰੂਟ ਗਰੁੱਪ** ਬਣਾਉਂਦੇ ਹਨ ਫਾਈਲਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਜਾਂ ਵੱਖਰੇ ਲੇਆਊਟ ਲਾਗੂ ਕਰਨ ਲਈ URL ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ ਬਿਨਾਂ। ## ਇਸ ਕਾ ਮਹੱਤਵ ਫਾਈਲ-ਆਧਾਰਿਤ ਰੂਟਿੰਗ URL ਦੀ ਸੰਰਚਨਾ ਨੂੰ ਫਾਈਲ ਟਰੀ ਤੋਂ ਸਪਸ਼ਟ ਕਰਦੀ ਹੈ — ਕੋਈ ਕੇਂਦਰੀ ਰੂਟ ਸੰਰਚਨਾ ਨਹੀਂ ਜੋ ਬਣਾਈ ਰੱਖਣੀ ਅਤੇ ਸਿੰਕ ਕਰਨੀ ਹੋ। ਵਿਸ਼ੇਸ ਫਾਈਲ ਦੇ ਨਾਮ (`page`, `layout`, `loading`, `error`, `route`) ਅਤੇ ਬ੍ਰੈਕਟ ਪ੍ਰਵਿਧੀਆਂ (`[param]`, `[...catchAll]`, `(group)`) ਨੂੰ ਜਾਣਨਾ ਕਿਸੇ ਵੀ App Router ਐਪ ਨੂੰ ਬਣਾਉਣ ਦੀ ਮੂਲ ਸ਼ਬਦਾਵਲੀ ਹੈ।