En el enrutador de aplicaciones de Next.js, se especifica solo la URL para renderizar el page.tsx en el servidor y se suelta en un nuevo panel de FlexLayoutSplitScreen.

v1.0.0

Esta página en sí es objeto de prueba del componente del servidor.

El FlexLayout normal se encarga del diseño y el redimensionamiento como antes, mientras que la división dinámica es manejada por FlexLayoutSplitScreen. El punto de entrada exclusivo de Next.js interpreta la URL de DragBox como un registro generado, renderiza el page.tsx en el servidor y luego pasa el resultado al panel dividido correspondiente.

1. Crear Registro

text

Solo se configuran la ruta de la aplicación y la ruta de salida en la parte superior del script del proyecto en uso. El resultado de la creación es un registro de importación estática que puede interpretar grupos de rutas y segmentos dinámicos.

Solo configura la ruta de la aplicación y la ruta de salida en la parte superior del script del proyecto utilizado. El resultado de la creación es un registro de importación estática que puede interpretar el grupo de rutas y el segmento dinámico, y la exportación predeterminada es FlexLayoutNextSplitScreen.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. Aplicar FlexLayoutNextSplitScreen.

FlexLayoutNextSplitScreen. es un wrapper exclusivo de Next.js que proporciona renderización del servidor para el panel de URL utilizando el registro de páginas generado. Solo necesita envolver una vez el árbol de FlexLayoutSplitScreen que recibe el panel basado en URL.

tsx

3. Restaurar la actualización del panel de URL.

El objetivo de restauración son solo los paneles de URL de Next que se pueden recrear.

Solo se incluyen en el snapshot persistente los paneles que están envueltos en FlexLayoutNextSplitScreen, que tienen DragBox exclusivo de Next.js, que son de tipo url, y que no especifican targetComponent directamente ni utilizan iframe. El método targetComponent no bloquea la renderización habitual, pero se excluye de los objetivos de restauración de actualización.

Si se especifica la persistencia, solo se almacenan en el almacenamiento los metadatos serializables como URL, screenKey, containerName, navigationTitle, y la estructura de división, en lugar del ReactElement en sí. Si restoreOnReload es falso, no se utiliza la persistencia, y si syncWithBrowserUrl es verdadero, se guarda un snapshot de la URL basado en pathname + search. Al navegar hacia atrás/adelante o volver a visitar la misma URL, se restaura el estado completo basado en la URL de esa URL, y al actualizar se restaura el snapshot de la URL actual.

tsx

4. Solo se pasa la URL a DragBox

El DragBox exclusivo de Next.js solo recibe la URL sin necesidad de crear un targetComponent. Si se especifica un targetComponent, se prioriza el método anterior y ese panel se excluye de los objetivos de persistencia.

tsx

5. iframe es opcional

El valor predeterminado de iframe es falso. Solo se debe especificar iframe como verdadero si se necesita una URL externa o un contexto de documento independiente. El modo iframe no requiere el registro de páginas de FlexLayoutNextSplitScreen y también se excluye de los objetivos de persistencia.

tsx

En la página del servidor, se pasan los params y searchParams extraídos de la URL. Sin embargo, el panel dividido no es un Next Router separado, por lo que usePathname, useParams y useSearchParams del componente cliente interno funcionan según la URL real del navegador.

Versión actual