दस्तावेज़/फ़ाइल-आधारित

लिंक करना और नेविगेट करना

क्लाइंट रूटिंग (useCSR = True) के साथ, दो पेजों के बीच एक लिंक दस्तावेज़ को पुनः लोड करने के बजाय ब्राउज़र में पेज को स्वैप करता है। लेआउट अपनी स्थिति बनाए रखते हैं.

सादे लिंक पहले से ही काम करते हैं

आपके प्रोजेक्ट के प्रत्येक पृष्ठ पर <a href> क्लाइंट पर नेविगेट करता है, बिना किसी घटक और मार्कर के:

<a href="/about">About</a>

ब्राउज़र पर एक लिंक छोड़ा जाता है, और पृष्ठ सामान्य रूप से लोड होता है, जब:

• एक संशोधक कुंजी रखी हुई है, या बटन मुख्य नहीं है;
• इसमें target (_self के अलावा), download, rel="external" या data-nexy-reload है;
• href एक अन्य मूल है, एक mailto: या tel: लिंक, या केवल एक #fragment;
• पथ किसी भी क्लाइंट रूट से मेल नहीं खाता है, इसलिए सर्वर इसका उत्तर देता है।

Link

Link वही एंकर है जो एक साधारण व्यक्ति नहीं कर सकता: इसका href आपके मार्गों के विरुद्ध जांचा जाता है, यह लक्ष्य पृष्ठ को गर्म करता है, और यह जानता है कि यह वर्तमान पृष्ठ पर कब इंगित करता है। जब आप nx dev या nx build चलाते हैं तो नेक्सी आपके फ्रेमवर्क का Link __nexy__/src में उत्पन्न करता है।

import { Link } from "@nexy/client"; export default function Nav() {  return (    <Link href="/dashboard" activeClassName="on">      Dashboard    </Link>  );}

वर्तमान पृष्ठ पर इंगित करने वाला लिंक aria-current="page" भी मिलता है।

हुक

स्थान हर ढाँचे में, उस ढाँचे के मुहावरे में उपलब्ध है। पहले के दौरान, सर्वर-साइड अनुरोध के यूआरएल के साथ हुक उत्तर प्रस्तुत करता है, ताकि पेज बिना किसी बेमेल के हाइड्रेट हो जाए।

क्वेरी एक URLSearchParams है। useRouter() और router दें push(href), replace(href), back(), forward(), refresh() और prefetch(href); push और replace { scroll: false } स्वीकार करते हैं।

import { useParams, useRouter, useSearchParams } from "@nexy/client"; export default function User() {  const { id } = useParams<{ id: string }>();  const tab = useSearchParams().get("tab") ?? "profile";  const router = useRouter();  return <button onClick={() => router.push(`/users/${id}?tab=posts`)}>{tab}</button>;}

Image

Image एक <img> प्रस्तुत करता है जो डिफ़ॉल्ट रूप से आलसी है और इसका आकार ज्ञात होने पर लेआउट को स्थानांतरित नहीं करता है।

<Image src="/photo.jpg" alt="A mountain" width={800} height={600} />

• alt आवश्यक है; सजावटी छवि के लिए alt="" का उपयोग करें। इसके गायब होने पर नेक्सी एक बार चेतावनी देती है।
• width और height दोनों के साथ, विशेषताएँ ब्राउज़र को पहलू अनुपात देती हैं और छवि तरल बनी रहती है (height: auto; max-width: 100%)।
• priority छवि को अब उच्च प्राथमिकता पर लोड करता है, जो आगमन पर दिखाई देती है।
• fill width और height को नजरअंदाज करते हुए, छवि को उसके स्थित मूल को कवर कर देता है।
• sizes और srcSet गुजरते हैं। नेक्सी छवियों का आकार बदलता या परिवर्तित नहीं करता है।

.nexy पेज से लिंक

---from nexy import Link---{{ Link("/about", "About", class_name="nav-link") }}

Link(href, children="", class_name=None, prefetch=True, **attrs) <a href="/about" data-nexy-link="true"> प्रस्तुत करता है। प्रत्येक विशेषता और href HTML से बच गए हैं।

राउटर क्या करता है

नेविगेशन पर, राउटर:

1. क्लाइंट मार्गों के विरुद्ध पथ से मेल खाता है (.tsx, .jsx, .vue, .svelte);
2. पृष्ठ और उसके लेआउट्स पहले को आयात और प्रस्तुत करता है, और उसके बाद ही यूआरएल को history.pushState के साथ ले जाता है, इसलिए पता बार कभी भी विफल पृष्ठ नहीं दिखाता है;
3. nexy:navigated इवेंट को document पर भेजता है;
4. शीर्ष पर, या #fragment लक्ष्य तक स्क्रॉल करता है।

एक नया नेविगेशन पुराने नेविगेशन को रद्द कर देता है जो अभी भी प्रस्तुत हो रहा है। यदि कोई पृष्ठ प्रस्तुत नहीं हो पाता है, तो ब्राउज़र इसके बदले सर्वर से इसके लिए पूछता है। पीछे और आगे के बटन उस प्रविष्टि के पृष्ठ को प्रस्तुत करते हैं और उसकी स्क्रॉल स्थिति को पुनर्स्थापित करते हैं।

document.addEventListener("nexy:navigated", (event) => {  console.log(event.detail.pathname, event.detail.params);});

राउटर केवल क्लाइंट रूट वाले प्रोजेक्ट में शुरू होता है, इसलिए सर्वर-रेंडर प्रोजेक्ट ब्राउज़र का अपना बैक बटन और स्क्रॉल रिस्टोरेशन रखता है।

अगले चरण

• लेआउट
• सीएसआर
• घटक

पृष्ठ को Markdown के रूप में कॉपी करें GitHub पर संपादित करें