रूटिंग

ऐप को साझा लेआउट, शॉर्टकट वाले लिंक और हिस्ट्री के साथ रूट में बांटें।

इस अध्याय का ऐप आपके कंसोल में चल रहा है। ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C से इसे खोलें (पहले डेवलपर सुविधाएं चालू करें), फिर इसे आज़माएं।
अध्याय देखें3:46

इस अध्याय में

  • फ़ाइलें ही रूट हैं
  • एक साझा लेआउट
  • वापस जाना
  • डायनामिक सेगमेंट

App Router, Next.js App Router के नियमों के अनुसार app/ की फ़ाइलों को URLs से मैप करता है। ब्राउज़र का एड्रेस बार और हिस्ट्री सिंक में रहते हैं, इसलिए UI के कंसोल में रेंडर होने के दौरान भी पीछे जाना, आगे जाना और डीप लिंक काम करते हैं।

फ़ाइलें ही रूट हैं

लिस्ट को उसके अपने रूट में ले जाएं और एक सेटिंग पेज जोड़ें:

app/+5text
app/  layout.tsx  page.tsx                 → /जोड़ा गया:   deployments/जोड़ा गया:     page.tsx               → /deploymentsजोड़ा गया:     [id]/page.tsx          → /deployments/dpl_8fK2जोड़ा गया:   settings/जोड़ा गया:     page.tsx               → /settings

एक साझा लेआउट

layout.tsx हर पेज को रैप करता है और नेविगेशन के दौरान अपनी स्टेट बनाए रखता है। टॉप बार और नेविगेशन को इसमें रखें।

app/layout.tsx+25tsx
जोड़ा गया: import type { ReactNode } from "react";जोड़ा गया: import { Box, Spacer, Text } from "@textjs/app";जोड़ा गया: import Link from "@textjs/app/link";जोड़ा गया: import { usePathname } from "@textjs/app/navigation";जोड़ा गया: जोड़ा गया: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };जोड़ा गया: जोड़ा गया: export default function RootLayout({ children }: { children?: ReactNode }) {जोड़ा गया:   const pathname = usePathname();जोड़ा गया:   return (जोड़ा गया:     <Box className="flex-col grow">जोड़ा गया:       <Box className="flex-row h-1 px-1 gap-2">जोड़ा गया:         <Text bold>▼ Acme</Text>जोड़ा गया:         <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>जोड़ा गया:         <Spacer />जोड़ा गया:       </Box>जोड़ा गया:       <Box className="flex-row h-1 px-1 gap-3">जोड़ा गया:         <Link href="/" shortcut="1">Overview</Link>जोड़ा गया:         <Link href="/deployments" shortcut="2">Deployments</Link>जोड़ा गया:         <Link href="/settings" shortcut="3">Settings</Link>जोड़ा गया:       </Box>जोड़ा गया:       <Box className="flex-col grow p-1">{children}</Box>जोड़ा गया:     </Box>जोड़ा गया:   );जोड़ा गया: }

shortcut एक कुंजी को लिंक से बांधता है। कंसोल में 1, 2 और 3 दबाएं; किसी असली ऐप में हर कुंजी दबाने पर URL बदल जाएगा।

वापस जाना

useRouter() कोड से नेविगेट करता है। लेआउट में Backspace कुंजी को router.back() से जोड़ें:

app/layout.tsx+7-2tsx
हटाया गया: import { Box, Spacer, Text } from "@textjs/app";जोड़ा गया: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";हटाया गया: import { usePathname } from "@textjs/app/navigation";जोड़ा गया: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) {  const pathname = usePathname();जोड़ा गया:   const router = useRouter();जोड़ा गया: जोड़ा गया:   useInput((e) => {जोड़ा गया:     if (e.key === "backspace") router.back();जोड़ा गया:   });

डायनामिक सेगमेंट

[id] फ़ोल्डर को उनकी वैल्यू params में मिलती है:

app/deployments/[id]/page.tsxtsx
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) {  return <Text bold>{params.id}</Text>;}

स्टैटिक होस्ट पर इस तरह के डायनामिक सेगमेंट के लिए index.html पर रीराइट ज़रूरी है। अध्याय 10 में इसकी जानकारी है।

आज़माएं

यह अध्याय के अंत वाला Acme Deploys है, जो DevTools में चल रहा है। पैड पर क्लिक करें, फिर नीचे दी गई कुंजियां इस्तेमाल करें।

▼ 05 · रूटिंग

कंसोल खोलें

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

ऐप DevTools में रेंडर होता है।पहले Safari की सेटिंग → एडवांस में “वेब डेवलपर के लिए सुविधाएं दिखाएं” चालू करें। फिर यहां क्लिक करें और 2 दबाएं।

डेस्कटॉप पर खोलें

यह ऐप DevTools कंसोल में रेंडर होता है, जिसके लिए डेस्कटॉप ब्राउज़र चाहिए।

क्विज़

2 सवाल

अध्याय पूरा करने के लिए हर सवाल का जवाब दें।

/deployments पर कौन सी फ़ाइल रेंडर होती है?

 

पेज के बीच नेविगेशन पर क्या बना रहता है?