javascript / expert
Snippet
Sparse-Array-Maskierung für Segment-Routing in Next.js Parallel Routes
Dieses Beispiel demonstriert fortgeschrittene Array-Manipulationen in Kombination mit strikter Steuerung des Kontrollflusses, um dynamische Parallel-Route-Slots in Next.js mithilfe von Sparse-Array-Masken aufzulösen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export function resolveParallelSlots(slotsArray, pathSegments) {const sparseMask = new Array(slotsArray.length);pathSegments.forEach((segment, idx) => {if (slotsArray.includes(segment)) {sparseMask[idx] = segment;}});const activeSlotIndex = sparseMask.findIndex(slot => slot !== undefined);switch (activeSlotIndex) {case -1:return 'default';case 0:return `@primary/${sparseMask[0]}`;default:return `@secondary/${sparseMask[activeSlotIndex]}`;}}
nextjs
Erklärung
1
const sparseMask = new Array(slotsArray.length);
Erstellt ein uninitialisiertes Sparse-Array, um Slot-Indizes passend zu den Routenparametern zu reservieren.
2
sparseMask[idx] = segment;
Befüllt passende Array-Positionen und lässt nicht zugewiesene Indizes als leere Stellen bestehen.
3
const activeSlotIndex = sparseMask.findIndex(slot => slot !== undefined);
Verwendet findIndex, um den ersten belegten Index im Sparse-Array zu ermitteln.
4
switch (activeSlotIndex) {
Steuert den Kontrollfluss basierend auf der Array-Slot-Position, um den korrekten Parallel-Route-Zweig zurückzugeben.