Menu

default.js

Die default.js-Datei wird verwendet, um einen Fallback innerhalb von Parallelen Routen zu rendern, wenn Next.js den aktiven Zustand eines Slots nach einem vollständigen Seitenaufruf nicht wiederherstellen kann.

Während der weichen Navigation behält Next.js den aktiven Zustand (Unterseite) für jeden Slot bei. Bei harten Navigationen (vollständiger Seitenaufruf) kann Next.js jedoch den aktiven Zustand nicht wiederherstellen. In diesem Fall kann eine default.js-Datei für Unterseiten gerendert werden, die nicht zur aktuellen URL passen.

Betrachten Sie die folgende Ordnerstruktur. Der @team-Slot hat eine settings-Seite, aber @analytics nicht.

Parallele Routen nicht übereinstimmende Routen

Bei der Navigation zu /settings wird der @team-Slot die settings-Seite rendern und gleichzeitig die aktuell aktive Seite für den @analytics-Slot beibehalten.

Beim Aktualisieren wird Next.js eine default.js für @analytics rendern. Wenn default.js nicht existiert, wird ein 404 gerendert.

Zusätzlich müssen Sie, da children ein impliziter Slot ist, auch eine default.js-Datei erstellen, um einen Fallback für children zu rendern, wenn Next.js den aktiven Zustand der übergeordneten Seite nicht wiederherstellen kann.

Referenz

params (optional)

Ein Promise, der zu einem Objekt aufgelöst wird, das die dynamischen Routenparameter vom Stammsegment bis zu den Unterseiten des Slots enthält. Zum Beispiel:

app/[artist]/@sidebar/default.js
TypeScript
export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const artist = (await params).artist
}
BeispielURLparams
app/[artist]/@sidebar/default.js/zackPromise<{ artist: 'zack' }>
app/[artist]/[album]/@sidebar/default.js/zack/nextPromise<{ artist: 'zack', album: 'next' }>
  • Da die params-Eigenschaft ein Promise ist, müssen Sie async/await oder die React-Funktion use verwenden, um die Werte zu erhalten.
    • In Version 14 und früher war params eine synchrone Eigenschaft. Zur Unterstützung der Abwärtskompatibilität können Sie in Next.js 15 noch synchron darauf zugreifen, aber dieses Verhalten wird in Zukunft als veraltet markiert werden.