M

MLOG

Latviešu

Izpētiet Next.js paralēlās maršrutēšanas: visaptverošs ceļvedis dinamisko, elastīgo lapu izklājumu veidošanai ar vairākiem neatkarīgiem sadaļām.

Next.js Paralēlās Maršrutēšanas: Dinamisku Lapu Izklājumu Veidošana

Next.js, vadošais React ietvars, pastāvīgi attīstās, lai nodrošinātu izstrādātājiem spēcīgus rīkus modernu tīmekļa lietojumu izstrādei. Viena no aizraujošākajām funkcijām, kas ieviesta jaunākajās versijās, ir Paralēlās Maršrutēšanas. Šī funkcija ļauj atveidot vairākas neatkarīgas sadaļas vienā un tajā pašā lapas izklājumā, piedāvājot nepārspējamu elastību un kontroli pār jūsu lietojumprogrammas struktūru un lietotāja pieredzi.

Kas ir Paralēlās Maršrutēšanas?

Tradicionāli maršruts Next.js atbilst vienam lapas komponentam. Kad pārejat uz citu maršrutu, visa lapa tiek atkārtoti atveidota. Paralēlās Maršrutēšanas pārtrauc šo paradigmu, ļaujot atveidot vairākus komponentus vienlaikus vienā un tajā pašā izklājumā, katru pārvalda savs neatkarīgais maršruta segments. Padomājiet par to kā par savas lapas sadalīšanu atsevišķās sadaļās, katrai ar savu URL un dzīves ciklu, kas visi pastāv vienā ekrānā.

Tas paver daudzas iespējas sarežģītāku un dinamiskāku lietotāja interfeisu izveidei. Piemēram, jūs varat izmantot paralēlās maršrutēšanas, lai:

Koncepta izpratne: Slots (Slots)

Paralēlo maršrutēšanas pamatkoncepcija ir “slotu” jēdziens. Slots ir nosaukta zona jūsu izklājumā, kurā tiek atveidots konkrēts maršruta segments. Jūs definējat šos slotus savā app direktorijā, izmantojot simbolu @, kam seko slota nosaukums. Piemēram, @sidebar attēlo slotu ar nosaukumu "sidebar".

Katru slotu pēc tam var saistīt ar maršruta segmentu. Kad lietotājs pāriet uz konkrētu maršrutu, Next.js atveidos komponentu, kas saistīts ar šo maršruta segmentu, attiecīgajā slotā izklājumā.

Īstenošana: Praktisks piemērs

Parādīsim, kā paralēlās maršrutēšanas darbojas ar praktisku piemēru. Iedomājieties, ka veidojat e-komercijas lietojumprogrammu un vēlaties attēlot produkta informācijas lapu ar pastāvīgu iepirkumu groza sānu joslu.

1. Direktoriju struktūra

Vispirms definēsim mūsu lietojumprogrammas direktoriju struktūru:

app/
  product/
    [id]/
      @cart/
        page.js  // Iepirkumu groza komponents
      page.js      // Produkta informācijas komponents
    layout.js   // Produkta izklājums
  layout.js     // Saknes izklājums

Šeit ir tas, ko katrs fails attēlo:

2. Saknes izklājums (app/layout.js)

Saknes izklājums parasti satur elementus, kas tiek koplietoti visā lietojumprogrammā, piemēram, galvenes un kājenes.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
Mans e-komercijas lietojums

        {children}
        
© 2024

      
    
  );
}

3. Produkta izklājums (app/product/[id]/layout.js)

Šī ir būtiskā daļa, kurā mēs definējam savus slotus. Mēs saņemam komponentus galvenajai produkta lapai un grozam kā props, kas atbilst page.js un @cart/page.js.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    

      
{children}

      
    

  );
}

Šajā piemērā mēs izmantojam vienkāršu flexbox izklājumu, lai novietotu galveno produkta saturu un groza sānu joslu blakus. Prop children saturēs atveidoto izvadi no app/product/[id]/page.js, un cart prop saturēs atveidoto izvadi no app/product/[id]/@cart/page.js.

4. Produkta informācijas lapa (app/product/[id]/page.js)

Šī ir standarta dinamiskā maršruta lapa, kas attēlo produkta informāciju, pamatojoties uz parametru id.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // Iegūstiet produkta datus, pamatojoties uz ID
  const product = await fetchProduct(id);

  return (
    

      
Produkta informācija

      
{product.name}

      
{product.description}

      
Cena: ${product.price}

    

  );
}

async function fetchProduct(id) {
  // Aizstājiet ar savu faktisko datu iegūšanas loģiku
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Produkts ${id}`, description: `Produkta ${id} apraksts`, price: 99.99 });
  }, 500));
}

5. Iepirkumu groza komponents (app/product/[id]/@cart/page.js)

Šis komponents attēlo iepirkumu grozu, kas tiks atveidots @cart slotā.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    

      
Iepirkumu grozs

      
Preces grozā: 3

      
    

  );
}

Paskaidrojums

Kad lietotājs pāriet uz /product/123, Next.js:

  1. Atveidos saknes izklājumu (app/layout.js).
  2. Atveidos produkta izklājumu (app/product/[id]/layout.js).
  3. Produkta izklājumā atveidos produkta informācijas komponentu (app/product/[id]/page.js) propā children.
  4. Vienlaikus atveidos iepirkumu groza komponentu (app/product/[id]/@cart/page.js) propā cart.

Rezultāts ir produkta informācijas lapa ar pastāvīgu iepirkumu groza sānu joslu, kas visi atveidoti vienā izklājumā.

Paralēlo maršrutu izmantošanas priekšrocības

Apsvērumi un labākā prakse

Papildu izmantošana: Nosacīta atveidošana un dinamiskie slots

Paralēlās maršrutēšanas neaprobežojas ar statisku slotu definīcijām. Jūs varat arī izmantot nosacītu atveidošanu un dinamiskos slotus, lai izveidotu vēl elastīgākus izklājumus.

Nosacīta atveidošana

Jūs varat nosacīti atveidot dažādus komponentus slotā, pamatojoties uz lietotāju lomām, autentifikācijas statusu vai citiem faktoriem.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    

      
{children}

      
    

  );
}

function AdminPanel() {
  return (
    

      
Administratora panelis

      
Pārvaldiet produkta informāciju šeit.

    

  );
}

Šajā piemērā, ja lietotājam ir loma “admin”, AdminPanel komponents tiks atveidots @cart slotā iepirkumu groza vietā.

Dinamiskie slots

Kaut arī mazāk izplatīts, jūs *varat* teorētiski konstruēt slotu nosaukumus dinamiski, bet tas parasti netiek atbalstīts sarežģītības un potenciālo veiktspējas problēmu dēļ. Labāk ir pieturēties pie iepriekš definētiem un labi saprotiem slotu. Ja rodas nepieciešamība pēc dinamiskajiem "slotu", apsveriet alternatīvus risinājumus, piemēram, izmantojot standarta React komponentus ar props un nosacītu atveidošanu.

Reālās pasaules piemēri un lietošanas gadījumi

Izpētīsim dažus reālās pasaules piemērus tam, kā paralēlās maršrutēšanas var izmantot dažāda veida lietojumprogrammās:

Secinājums

Next.js Paralēlās maršrutēšanas ir spēcīga funkcija, kas paver jaunu iespēju pasauli dinamisko un elastīgu tīmekļa lietojumprogrammu veidošanai. Ļaujot atveidot vairākas neatkarīgas sadaļas vienā un tajā pašā lapas izklājumā, paralēlās maršrutēšanas ļauj jums izveidot saistošāku lietotāju pieredzi, palielināt koda atkārtotu izmantošanu un vienkāršot izstrādes procesu. Kaut arī ir svarīgi apsvērt potenciālās sarežģītības un ievērot labāko praksi, paralēlo maršrutu apgūšana var ievērojami uzlabot jūsu Next.js izstrādes prasmes un ļaut jums veidot patiesi novatoriskas tīmekļa lietojumprogrammas.

Tā kā Next.js turpina attīstīties, paralēlās maršrutēšanas neapšaubāmi kļūs par arvien svarīgāku rīku izstrādātājiem, kuri vēlas pārbīdīt iespējamā robežas tīmeklī. Eksperimentējiet ar šajā rokasgrāmatā izklāstītajiem konceptiem un atklājiet, kā paralēlās maršrutēšanas var pārveidot jūsu pieeju modernu tīmekļa lietojumprogrammu veidošanai.