Écran partagé URL Next.js

v1.0.0

Dans le routeur d'application Next.js, spécifiez simplement l'URL pour rendre le page.tsx sur le serveur et déposez-le dans un nouveau panneau de FlexLayoutSplitScreen.

Flux d'opération

Le FlexLayout standard gère la mise en page et le redimensionnement comme auparavant, tandis que la division dynamique est gérée par FlexLayoutSplitScreen. Le point d'entrée spécifique à Next.js interprète l'URL de DragBox comme un registre généré, rend le page.tsx sur le serveur, puis transmet le résultat au panneau partagé correspondant.

text

1. Création du registre

Configurez uniquement le chemin de l'application et le chemin de sortie en haut du script du projet utilisé. Le résultat de la création est un registre d'importation statique capable d'interpréter le groupe de routes et le segment dynamique, et l'exportation par défaut est FlexLayoutNextSplitScreen.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. Application de FlexLayoutNextSplitScreen

FlexLayoutNextSplitScreen est un wrapper spécifique à Next.js qui fournit le rendu côté serveur du panneau URL en utilisant le registre de page généré. Il suffit d'envelopper une fois l'arbre FlexLayoutSplitScreen qui reçoit le panneau basé sur l'URL.

tsx

3. Restauration du rafraîchissement du panneau URL

Les cibles de restauration ne sont que les panneaux URL Next pouvant être recréés.

Sont inclus dans le snapshot persistant uniquement les panneaux enveloppés dans FlexLayoutNextSplitScreen, avec un DragBox spécifique à Next.js qui utilise la méthode URL, et qui n'inclut pas de targetComponent spécifié directement ni n'utilise d'iframe. La méthode targetComponent ne bloque pas le rendu habituel mais est exclue des cibles de restauration de rafraîchissement.

Si vous spécifiez la persistance, seules les métadonnées sérialisables comme l'URL, screenKey, containerName, navigationTitle, et la structure de partition sont stockées. Si restoreOnReload est faux, la persistance n'est pas utilisée, et si syncWithBrowserUrl est vrai, un instantané par URL est enregistré. Lors de la navigation arrière/avant ou de la revisite de la même URL, l'état de partition complet basé sur cette URL est restauré, et lors du rafraîchissement, l'instantané de l'URL actuelle est également restauré.

tsx

4. DragBox ne transmet que l'URL.

Le DragBox spécifique à Next.js ne nécessite pas de créer directement targetComponent, il reçoit uniquement l'URL. Si targetComponent est spécifié, la méthode existante prévaut et ce panneau est exclu des cibles de persistance.

tsx

5. iframe est optionnel.

La valeur par défaut de l'iframe est false. Spécifiez true pour l'iframe uniquement si une URL externe ou un contexte de document indépendant est nécessaire. Le mode iframe n'a pas besoin du registre de pages de FlexLayoutNextSplitScreen et est également exclu des cibles de persistance.

tsx

Contraintes du contexte du routeur

Les pages serveur reçoivent les params et searchParams extraits de l'URL. Cependant, le panneau partagé n'est pas un Next Router séparé, donc les usePathname, useParams et useSearchParams du composant client interne fonctionnent en fonction de l'URL réelle du navigateur.