M

MLOG

Lietuvių

Išsami Next.js perėmimo maršrutų analizė, pristatanti praktines modalinių langų ir perdangų diegimo strategijas geresnei naudotojų patirčiai.

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:

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ų:

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

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

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

Alternatyvos perėmimo maršrutams

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

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šrutai (Interception Routes): įvaldome modalinius ir perdangos modelius | MLOG