M

MLOG

Latviešu

Padziļināts ieskats Next.js pārtveršanas maršrutos, demonstrējot praktiskas modālo un pārklājuma logu ieviešanas stratēģijas uzlabotai lietotāju pieredzei.

Next.js pārtveršanas maršruti: modālo un pārklājuma logu modeļu apgūšana

Next.js, populārs React ietvars, piedāvā jaudīgas funkcijas, lai veidotu veiktspējīgas un mērogojamas tīmekļa lietojumprogrammas. Viena no šādām funkcijām, pārtveršanas maršruti (Interception Routes), nodrošina sarežģītu veidu, kā risināt kompleksus maršrutēšanas scenārijus, īpaši īstenojot modālo un pārklājuma logu modeļus. Šī visaptverošā rokasgrāmata pēta, kā izmantot pārtveršanas maršrutus, lai radītu nevainojamu un saistošu lietotāja pieredzi.

Kas ir pārtveršanas maršruti?

Pārtveršanas maršruti ļauj pārtvert maršrutu un renderēt citu lietotāja saskarni, nemainot URL pārlūkprogrammā. Iedomājieties to kā pagaidu apvedceļu, kas bagātina lietotāja pieredzi. Tas ir īpaši noderīgi, lai:

Kāpēc izmantot pārtveršanas maršrutus modālajiem un pārklājuma logiem?

Tradicionālās metodes modālo un pārklājuma logu apstrādei bieži ietver stāvokļa pārvaldību komponentā, kas var kļūt sarežģīti un radīt veiktspējas problēmas. Pārtveršanas maršruti piedāvā vairākas priekšrocības:

Pārtveršanas maršrutu iestatīšana Next.js

Ilustrēsim, kā ieviest pārtveršanas maršrutus ar praktisku piemēru: izveidojot modālo logu produkta detaļu attēlošanai e-komercijas lietojumprogrammā.

Projekta struktūra

Vispirms definēsim direktoriju struktūru. Pieņemsim, ka mums ir `products` direktorija, kur katram produktam ir unikāls ID.

app/
  products/
    [id]/
      page.js       // Produkta detaļu lapa
    @modal/
      [id]/
        page.js   // Modālā loga saturs produkta detaļām
    default.js  // Izkārtojums products direktorijai
  page.js           // Sākumlapa

Paskaidrojums

Koda implementācija

1. Sākumlapa (app/page.js)

Šajā lapā tiek rādīts produktu saraksts, kur katram produktam ir saite, kas atver produkta detaļas modālajā logā.

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

const products = [
 { id: '1', name: 'Klēpjdators' },
 { id: '2', name: 'Viedtālrunis' },
 { id: '3', name: 'Planšetdators' },
];

export default function Home() {
 return (
 

 
Produktu saraksts

 
    
 {products.map((product) => (
 
  • 
 
 {product.name}
 
 
    • 
 ))}
 

 

 );
}

2. Produkta detaļu lapa (app/products/[id]/page.js)

Šī lapa renderē pilnas produkta detaļas. Reālā lietojumprogrammā dati tiktu iegūti no API vai datu bāzes. Svarīgi, ka tā nodrošina saiti atpakaļ uz sākotnējo produktu sarakstu.

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

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

 return (
 

 
Produkta detaļas

 
Produkta ID: {id}

 
Šī ir pilna produkta detaļu lapa.

 Atpakaļ uz produktu sarakstu
 

 );
}

3. Modālā loga saturs (app/products/@modal/[id]/page.js)

Šī ir būtiskākā daļa – pārtveršanas maršruts. Tas renderē modālā loga saturu, izmantojot to pašu produkta ID. Ievērojiet `useParams` āķi (hook), lai piekļūtu ID.

// 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 (
 

 

 
Produkta modālais logs

 
Produkta ID: {id}

 
Šis saturs tiek renderēts modālajā logā!

  history.back()}>Aizvērt modālo logu
 

 

 );
}

Piezīme: Direktīva `'use client';` ir nepieciešama klienta puses interaktivitātei, īpaši izmantojot `useParams`.

Stilizācija (modal.module.css): Vienkāršs CSS modulis tiek izmantots pamata modālā loga stilizācijai. Tas ir būtiski, lai pareizi pozicionētu modālo logu.

/* 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; /* Nodrošina, ka tas ir virspusē */
}

.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. Izkārtojums (app/products/default.js)

Šis izkārtojums ietver `@modal` maršrutu, nodrošinot, ka tas tiek renderēts produkta kontekstā.

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

 {children}
 

 );
}

Kā tas darbojas

  1. Kad lietotājs noklikšķina uz produkta saites sākumlapā (piemēram, `/products/1`), Next.js atpazīst to kā maršrutu `products` direktorijā.
  2. `@modal` pārtveršanas maršruta dēļ Next.js pārbauda, vai zem `@modal` ir atbilstošs maršruts.
  3. Ja tiek atrasta atbilstība (piemēram, `/products/@modal/1`), Next.js renderē saturu no `app/products/@modal/[id]/page.js` esošās lapas ietvaros. URL pārlūkprogrammā paliek `/products/1`.
  4. `modalOverlay` stili pozicionē modālo logu virs pamatā esošā satura.
  5. Noklikšķinot uz "Aizvērt modālo logu", tiek izmantots `history.back()`, lai pārvietotos atpakaļ, tādējādi efektīvi aizverot modālo logu un atgriežoties iepriekšējā stāvoklī.

Padziļinātas pārtveršanas maršrutu tehnikas

1. Pārlūka pogas "Atpakaļ" apstrāde

Būtisks modālā loga ieviešanas aspekts ir nodrošināt pareizu uzvedību ar pārlūkprogrammas pogu "atpakaļ". Kad lietotājs atver modālo logu un pēc tam noklikšķina uz pogas "atpakaļ", ideālā gadījumā modālais logs būtu jāaizver un jāatgriežas iepriekšējā kontekstā, nevis jāpāriet prom no lietojumprogrammas.

Piemērā izmantotā `history.back()` metode panāk šo efektu, pārvietojoties vienu soli atpakaļ pārlūkprogrammas vēsturē. Tomēr sarežģītākos scenārijos jums var nākties ieviest pielāgotu pogas "atpakaļ" apstrādātāju, kas ņem vērā pašreizējo maršrutēšanas stāvokli.

2. Dinamisks modālā loga saturs

Reālās lietojumprogrammās modālā loga saturs, visticamāk, būs dinamisks, iegūts no API vai datu bāzes, pamatojoties uz produkta ID. Jūs varat izmantot `fetch` API vai datu ielādes bibliotēku, piemēram, SWR vai React Query, modālā loga komponentā, lai iegūtu nepieciešamos datus.

// 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}`); // Aizvietojiet ar savu API galapunktu
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Ielādē...
;
 }

 return (
 

 
{product.name}

 
{product.description}

 {/* ... citas produkta detaļas ... */}
  history.back()}>Aizvērt modālo logu
 

 );
}

3. Ligzdoti modālie logi

Pārtveršanas maršrutus var ligzdot, lai izveidotu sarežģītas modālo logu darbplūsmas. Piemēram, lietotājs varētu atvērt produkta detaļu modālo logu un pēc tam noklikšķināt uz pogas, lai atvērtu saistīta produkta modālo logu. To var panākt, izveidojot papildu pārtveršanas maršrutus `@modal` direktorijā.

4. 404 kļūdu apstrāde

Apsveriet scenāriju, kur lietotājs pāriet uz modālā loga URL ar nederīgu produkta ID (piemēram, `/products/@modal/nonexistent`). Jums vajadzētu ieviest pienācīgu kļūdu apstrādi, lai parādītu lietotājam draudzīgu 404 lapu vai novirzītu lietotāju uz derīgu produkta lapu.

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

// ... (rest of the component)

 if (!product) {
 return 
Produkts nav atrasts.
; // Vai novirzīt uz 404 lapu
 }

// ... (rest of the component)

5. Pārklājuma modeļi

Lai gan piemēri ir koncentrējušies uz modālajiem logiem, pārtveršanas maršrutus var izmantot arī pārklājumiem. Tā vietā, lai centrētu saturu, pārklājums varētu parādīties kā sānjosla vai panelis, kas ieslīd no ekrāna malas. CSS stilizācija būtu atšķirīga, bet maršrutēšanas loģika paliek tāda pati.

Reāli piemēri un lietošanas gadījumi

Piemērs: Starptautiska e-komercijas platforma Iedomājieties globālu e-komercijas vietni. Kad lietotājs noklikšķina uz produkta, detaļas atveras modālajā logā. URL mainās uz `/products/[product_id]`, nodrošinot tiešu sasaisti un SEO priekšrocības. Ja lietotājs modālā loga lapā maina valodu (piemēram, no angļu uz spāņu), produkta detaļas tiek ielādētas izvēlētajā valodā, un modālā loga saturs tiek atjaunināts bez pārtraukuma. Turklāt vietne varētu noteikt lietotāja atrašanās vietu (ar piekrišanu) un modālajā logā parādīt piegādes informāciju, kas attiecas uz viņu reģionu.

Labākā prakse, izmantojot pārtveršanas maršrutus

Alternatīvas pārtveršanas maršrutiem

Lai gan pārtveršanas maršruti piedāvā jaudīgu risinājumu modālo un pārklājuma logu modeļiem, var apsvērt arī citas pieejas:

Noslēgums

Next.js pārtveršanas maršruti nodrošina stabilu un elegantu veidu, kā ieviest modālo un pārklājuma logu modeļus jūsu tīmekļa lietojumprogrammās. Izmantojot šo jaudīgo funkciju, jūs varat radīt nevainojamu, SEO draudzīgu un lietotājam draudzīgu pieredzi. Lai gan pastāv alternatīvas pieejas, pārtveršanas maršruti piedāvā unikālu priekšrocību kombināciju, padarot tos par vērtīgu rīku jebkura Next.js izstrādātāja arsenālā.

Papildu resursi