Next.js perėmimo maršrutai (Interception Routes): įvaldome modalinius ir perdangos modelius

Next.js, populiarus React karkasas, siūlo galingas funkcijas, skirtas kurti našias ir keičiamo dydžio žiniatinklio programas. Viena iš tokių funkcijų, perėmimo maršrutai (Interception Routes), suteikia pažangų būdą valdyti sudėtingus maršrutizavimo scenarijus, ypač įgyvendinant modalinius ir perdangos modelius. Šiame išsamiame vadove nagrinėjama, kaip panaudoti perėmimo maršrutus kuriant sklandžias ir patrauklias naudotojų patirtis.

Kas yra perėmimo maršrutai?

Perėmimo maršrutai leidžia jums perimti maršrutą ir atvaizduoti kitokią vartotojo sąsają, nekeičiant URL naršyklėje. Galvokite apie tai kaip apie laikiną aplinkkelį, kuris praturtina naudotojo patirtį. Tai ypač naudinga:

• Modaliniai langai: turinio rodymas modaliniame lange nenaviguojant į naują puslapį.
• Perdangos: papildomos informacijos ar valdiklių rodymas ant esamo turinio.
• Nuotraukų galerijos: sklandžios, puslapiui būdingos naršymo patirties kūrimas nuotraukų galerijoje.
• Adaptacijos procesai: naudotojų vedimas per kelių žingsnių procesą be viso puslapio perkrovimų.

Kodėl naudoti perėmimo maršrutus modaliniams langams ir perdangoms?

Tradiciniai modalinių langų ir perdangų valdymo metodai dažnai apima būsenos valdymą komponente, o tai gali tapti sudėtinga ir sukelti našumo problemų. Perėmimo maršrutai siūlo keletą privalumų:

• Pagerintas SEO: Modaliniame lange ar perdangoje rodomas turinys vis dar prieinamas paieškos sistemoms, nes jis yra susietas su konkrečiu maršrutu.
• Bendrinamos URL nuorodos: Naudotojai gali bendrinti tiesioginę nuorodą į modalinio lango ar perdangos turinį.
• Naršyklės istorija: Naršyklės „atgal“ ir „pirmyn“ mygtukai veikia kaip tikėtasi, leisdami naudotojams naršyti po modalinių langų istoriją.
• Supaprastintas būsenos valdymas: Sumažėjęs modalinio lango matomumo būsenos valdymo sudėtingumas, dėl ko kodas tampa švaresnis ir lengviau prižiūrimas.
• Pagerintas našumas: Išvengiama nereikalingų pervaizdavimų atnaujinant tik modalinio lango turinį.

Perėmimo maršrutų nustatymas Next.js

Iliustruokime, kaip įgyvendinti perėmimo maršrutus praktiniu pavyzdžiu: kuriant modalinį langą produkto informacijai rodyti elektroninės prekybos programoje.

Projekto struktūra

Pirmiausia, apibrėžkime katalogų struktūrą. Tarkime, turime `products` katalogą, kuriame kiekvienas produktas turi unikalų ID.

app/
  products/
    [id]/
      page.js       // Produkto informacijos puslapis
    @modal/
      [id]/
        page.js   // Modalinis turinys produkto informacijai
    default.js  // Produktų katalogo maketas
  page.js           // Pradinis puslapis

Paaiškinimas

• `app/products/[id]/page.js`: Tai yra pagrindinis produkto informacijos puslapis.
• `app/products/@modal/[id]/page.js`: Tai apibrėžia perėmimo maršrutą, kuris atvaizduos modalinio lango turinį. Atkreipkite dėmesį į `@modal` konvenciją – tai labai svarbu, kad Next.js atpažintų perėmimo maršrutą.
• `app/products/default.js`: Tai yra `products` katalogo maketas. Būtina apgaubti `@modal` maršrutą šiuo maketu.
• `app/page.js`: Pradinis puslapis, kuriame bus nuorodos į mūsų produktus.

Kodo įgyvendinimas

1. Pradinis puslapis (app/page.js)

Šiame puslapyje rodomas produktų sąrašas, kuriame kiekvienas produktas turi nuorodą, atidarančią produkto informaciją modaliniame lange.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Nešiojamasis kompiuteris' },
 { id: '2', name: 'Išmanusis telefonas' },
 { id: '3', name: 'Planšetinis kompiuteris' },
];

export default function Home() {
 return (
 

 
Produktų sąrašas
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

2. Produkto informacijos puslapis (app/products/[id]/page.js)

Šiame puslapyje atvaizduojama visa produkto informacija. Realioje programoje čia būtų gaunami duomenys iš API ar duomenų bazės. Svarbu, kad jame būtų nuoroda atgal į pradinį produktų sąrašą.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Produkto informacija
 
Produkto ID: {id}
 
Tai yra pilnas produkto informacijos puslapis.
 Grįžti į produktų sąrašą
 
 );
}

3. Modalinis turinys (app/products/@modal/[id]/page.js)

Tai yra svarbiausia dalis – perėmimo maršrutas. Jis atvaizduoja modalinio lango turinį, naudodamas tą patį produkto ID. Atkreipkite dėmesį į `useParams` hook, kuris naudojamas ID pasiekti.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Produkto modalinis langas
 
Produkto ID: {id}
 
Šis turinys atvaizduojamas modaliniame lange!
  history.back()}>Uždaryti modalinį langą
 
 
 );
}

Pastaba: `'use client';` direktyva yra būtina kliento pusės interaktyvumui, ypač naudojant `useParams`.

Stiliai (modal.module.css): Paprastas CSS modulis naudojamas pagrindiniam modalinio lango stiliui. Tai labai svarbu norint teisingai pozicionuoti modalinį langą.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Užtikrina, kad jis būtų viršuje */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Maketas (app/products/default.js)

Šis maketas apgaubia `@modal` maršrutą, užtikrindamas, kad jis būtų atvaizduotas produkto kontekste.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 
 );
}

Kaip tai veikia

1. Kai naudotojas paspaudžia produkto nuorodą pradiniame puslapyje (pvz., `/products/1`), Next.js atpažįsta tai kaip maršrutą `products` kataloge.
2. Dėl `@modal` perėmimo maršruto, Next.js patikrina, ar yra atitinkamas maršrutas po `@modal`.
3. Jei randamas atitikmuo (pvz., `/products/@modal/1`), Next.js atvaizduoja turinį iš `app/products/@modal/[id]/page.js` dabartiniame puslapyje. Naršyklės URL lieka `/products/1`.
4. `modalOverlay` stiliai pozicionuoja modalinį langą ant pagrindinio turinio.
5. Paspaudus „Uždaryti modalinį langą“, naudojama `history.back()`, kad grįžtumėte atgal, efektyviai uždarant modalinį langą ir grįžtant į ankstesnę būseną.

Pažangios perėmimo maršrutų technikos

1. „Atgal“ mygtuko valdymas

Svarbus modalinio lango įgyvendinimo aspektas yra užtikrinti tinkamą elgesį su naršyklės „atgal“ mygtuku. Kai naudotojas atidaro modalinį langą ir tada paspaudžia „atgal“ mygtuką, jis turėtų uždaryti modalinį langą ir grįžti į ankstesnį kontekstą, o ne išeiti iš programos.

Pavyzdyje naudojamas `history.back()` metodas pasiekia šį efektą, naršydamas vienu žingsniu atgal naršyklės istorijoje. Tačiau sudėtingesniais atvejais gali tekti įdiegti pasirinktinį „atgal“ mygtuko tvarkytuvą, kuris atsižvelgtų į dabartinę maršrutizavimo būseną.

2. Dinaminis modalinio lango turinys

Realiose programose modalinio lango turinys greičiausiai bus dinaminis, gaunamas iš API arba duomenų bazės pagal produkto ID. Galite naudoti `fetch` API arba duomenų gavimo biblioteką, pvz., SWR ar React Query, modaliniame komponente, kad gautumėte reikiamus duomenis.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Pakeiskite savo API galiniu tašku
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Kraunama...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... kita produkto informacija ... */}
  history.back()}>Uždaryti modalinį langą
 
 );
}

3. Įdėtieji modaliniai langai

Perėmimo maršrutai gali būti įdėti vienas į kitą, kad būtų sukurtos sudėtingos modalinių langų darbo eigos. Pavyzdžiui, vartotojas gali atidaryti produkto informacijos modalinį langą ir tada paspausti mygtuką, kad atidarytų susijusio produkto modalinį langą. Tai galima pasiekti sukuriant papildomus perėmimo maršrutus `@modal` kataloge.

4. 404 klaidų tvarkymas

Apsvarstykite scenarijų, kai vartotojas pereina į modalinio lango URL su neteisingu produkto ID (pvz., `/products/@modal/nonexistent`). Turėtumėte įdiegti tinkamą klaidų tvarkymą, kad būtų rodomas patogus 404 puslapis arba vartotojas būtų nukreiptas į galiojantį produkto puslapį.

// app/products/@modal/[id]/page.js

// ... (likusi komponento dalis)

 if (!product) {
 return 
Produktas nerastas.
; // Arba nukreipti į 404 puslapį
 }

// ... (likusi komponento dalis)

5. Perdangos modeliai

Nors pavyzdžiuose daugiausia dėmesio skyrėme modaliniams langams, perėmimo maršrutai taip pat gali būti naudojami perdangoms. Užuot centruojant turinį, perdanga gali pasirodyti kaip šoninė juosta ar panelė, kuri įslysta iš ekrano šono. CSS stilius būtų kitoks, tačiau maršrutizavimo logika išlieka ta pati.

Realaus pasaulio pavyzdžiai ir naudojimo atvejai

• Elektroninė prekyba: Produkto informacijos, pirkinių krepšelio santraukų ar atsiskaitymo procesų rodymas modaliniame lange ar perdangoje.
• Socialiniai tinklai: Nuotraukų peržiūrų, komentarų skilčių ar vartotojų profilių rodymas modaliniame lange.
• Dokumentų valdymas: Dokumentų peržiūrų, redagavimo įrankių ar versijų istorijos rodymas perdangoje.
• Žemėlapių programos: Vietos informacijos, lankytinų objektų ar maršruto informacijos rodymas perdangoje.
• CRM sistemos: Kontaktinės informacijos, veiklos žurnalų ar pardavimo galimybių rodymas modaliniame lange.

Pavyzdys: Tarptautinė elektroninės prekybos platforma Įsivaizduokite pasaulinę elektroninės prekybos svetainę. Kai vartotojas spusteli produktą, informacija atidaroma modaliniame lange. URL pasikeičia į `/products/[product_id]`, leidžiantį tiesioginį susiejimą ir SEO privalumus. Jei vartotojas modaliniame lange pakeičia kalbą (pvz., iš anglų į ispanų), produkto informacija gaunama pasirinkta kalba, o modalinio lango turinys sklandžiai atnaujinamas. Be to, svetainė galėtų nustatyti vartotojo buvimo vietą (su sutikimu) ir modaliniame lange rodyti siuntimo informaciją, susijusią su jo regionu.

Geriausios perėmimo maršrutų naudojimo praktikos

• Modalinio lango turinys turi būti glaustas: Venkite perkrauti modalinį langą per didele informacijos gausa. Sutelkite dėmesį į esminių detalių pateikimą.
• Užtikrinkite aiškią navigaciją: Užtikrinkite, kad vartotojai galėtų lengvai uždaryti modalinį langą ir grįžti į ankstesnį kontekstą.
• Optimizuokite mobiliesiems įrenginiams: Kurkite modalinio lango maketą taip, kad jis būtų adaptyvus ir patogus naudoti mažesniuose ekranuose.
• Kruopščiai testuokite: Testuokite modalinio lango elgesį skirtingose naršyklėse ir įrenginiuose, kad užtikrintumėte nuoseklią patirtį.
• Atsižvelkite į prieinamumą: Įdiekite tinkamus ARIA atributus ir klaviatūros navigaciją, kad modalinis langas būtų prieinamas vartotojams su negalia.

Alternatyvos perėmimo maršrutams

Nors perėmimo maršrutai siūlo galingą sprendimą modalinių langų ir perdangų modeliams, galima apsvarstyti ir kitus metodus:

• Tradicinis būsenos valdymas: Naudojant React `useState` hook arba būsenos valdymo biblioteką, tokią kaip Redux ar Zustand, modalinio lango matomumui valdyti. Tai yra paprasčiau labai paprastoms modalinių langų implementacijoms, tačiau tampa sunkiau valdoma didesniu mastu.
• Trečiųjų šalių modalinių langų bibliotekos: Naudojant iš anksto sukurtus modalinių langų komponentus iš bibliotekų, tokių kaip React Modal ar Material UI. Jos gali pasiūlyti greitą sprendimą, tačiau gali apriboti pritaikymo galimybes.
• Kliento pusės maršrutizavimo bibliotekos: Bibliotekos, tokios kaip React Router, gali būti naudojamos kliento pusės maršrutizavimui ir modalinio lango matomumui valdyti.

Išvada

Next.js perėmimo maršrutai suteikia tvirtą ir elegantišką būdą įgyvendinti modalinių langų ir perdangų modelius jūsų žiniatinklio programose. Naudodami šią galingą funkciją, galite sukurti sklandžias, SEO draugiškas ir patogias naudotojui patirtis. Nors egzistuoja alternatyvių metodų, perėmimo maršrutai siūlo unikalų privalumų derinį, todėl jie yra vertingas įrankis bet kurio Next.js kūrėjo arsenale.

Papildomi ištekliai

• Next.js perėmimo maršrutų dokumentacija
• React dokumentacija