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:

• Modālie logi: satura attēlošana modālajā logā, nepārejot uz jaunu lapu.
• Pārklājumi: papildu informācijas vai vadīklu rādīšana virs esošā satura.
• Attēlu galerijas: vienmērīgas, lapai līdzīgas navigācijas pieredzes radīšana attēlu galerijā.
• Iepazīstināšanas plūsmas: lietotāju vadīšana caur daudzpakāpju procesu bez pilnas lapas pārlādes.

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:

• Uzlabots SEO: Saturs, kas tiek rādīts modālajā logā vai pārklājumā, joprojām ir pieejams meklētājprogrammām, jo tas ir saistīts ar konkrētu maršrutu.
• Koplietojami URL: Lietotāji var kopīgot tiešu saiti uz modālā loga vai pārklājuma saturu.
• Pārlūka vēsture: Pārlūkprogrammas pogas "atpakaļ" un "uz priekšu" darbojas kā paredzēts, ļaujot lietotājiem pārvietoties pa modālā loga vēsturi.
• Vienkāršota stāvokļa pārvaldība: Samazināta sarežģītība, pārvaldot modālā loga redzamības stāvokli, kas nodrošina tīrāku un vieglāk uzturamu kodu.
• Uzlabota veiktspēja: Izvairieties no nevajadzīgām atkārtotām renderēšanām, atjauninot tikai modālā loga saturu.

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

• `app/products/[id]/page.js`: Šī ir galvenā produkta detaļu lapa.
• `app/products/@modal/[id]/page.js`: Šis definē pārtveršanas maršrutu, kas renderēs modālā loga saturu. Ievērojiet `@modal` konvenciju – tas ir būtiski, lai Next.js atpazītu pārtveršanas maršrutu.
• `app/products/default.js`: Šis ir `products` direktorijas izkārtojums. Šajā izkārtojumā ir nepieciešams ietvert `@modal` maršrutu.
• `app/page.js`: Sākumlapa, kurā būs saites uz mūsu produktiem.

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

• E-komercija: Produkta detaļu, iepirkumu groza kopsavilkumu vai norēķinu plūsmu attēlošana modālajā logā vai pārklājumā.
• Sociālie mediji: Attēlu priekšskatījumu, komentāru sadaļu vai lietotāju profilu rādīšana modālajā logā.
• Dokumentu pārvaldība: Dokumentu priekšskatījumu, rediģēšanas rīku vai versiju vēstures attēlošana pārklājumā.
• Karšu lietojumprogrammas: Atrašanās vietas detaļu, interešu punktu vai maršruta informācijas rādīšana pārklājumā.
• CRM sistēmas: Kontaktu detaļu, darbību žurnālu vai pārdošanas iespēju attēlošana modālajā logā.

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

• Saglabājiet modālā loga saturu kodolīgu: Izvairieties no modālā loga pārslogošanas ar pārāk daudz informācijas. Koncentrējieties uz būtisko detaļu pasniegšanu.
• Nodrošiniet skaidru navigāciju: Pārliecinieties, ka lietotāji var viegli aizvērt modālo logu un atgriezties iepriekšējā kontekstā.
• Optimizējiet mobilajām ierīcēm: Izstrādājiet modālā loga izkārtojumu tā, lai tas būtu responsīvs un lietotājam draudzīgs uz mazākiem ekrāniem.
• Testējiet rūpīgi: Pārbaudiet modālā loga darbību dažādās pārlūkprogrammās un ierīcēs, lai nodrošinātu konsekventu pieredzi.
• Apsveriet pieejamību: Ieviesiet atbilstošus ARIA atribūtus un tastatūras navigāciju, lai padarītu modālo logu pieejamu lietotājiem ar invaliditāti.

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:

• Tradicionālā stāvokļa pārvaldība: Izmantojot React `useState` āķi vai stāvokļa pārvaldības bibliotēku, piemēram, Redux vai Zustand, lai kontrolētu modālā loga redzamību. Tas ir vienkāršāk ļoti pamata modālo logu implementācijām, bet kļūst grūtāk pārvaldāms lielākā mērogā.
• Trešo pušu modālo logu bibliotēkas: Izmantojot gatavus modālo logu komponentus no bibliotēkām, piemēram, React Modal vai Material UI. Tās var nodrošināt ātru risinājumu, bet var ierobežot pielāgošanas iespējas.
• Klienta puses maršrutēšanas bibliotēkas: Bibliotēkas, piemēram, React Router, var izmantot, lai pārvaldītu klienta puses maršrutēšanu un modālā loga redzamību.

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

• Next.js pārtveršanas maršrutu dokumentācija
• React dokumentācija