在 Next.js App Router 中,只需指定 URL 即可在服務器上渲染該 page.tsx,並將其放入 FlexLayoutSplitScreen 的新窗格中。
這個頁面本身是 Server Component 測試的對象。
一般的 FlexLayout 負責佈局和調整大小,而動態分割由 FlexLayoutSplitScreen 負責。Next.js 專用的進入點將 DragBox 的 URL 解釋為生成的 registry,然後在服務器上渲染 page.tsx,並將結果傳遞到該分割窗格中。
1. 創建 Registry
在使用的項目腳本的頂部僅設置應用路徑和輸出路徑。生成的結果是一個靜態導入 registry,可以解釋路由組和動態段。
在使用的專案的腳本頂部僅設置應用路徑和輸出路徑。生成結果是可以解析路由組和動態段的靜態導入註冊表,基本導出為 FlexLayoutNextSplitScreen。
scripts/generateFlexLayoutSplitScreenPageRegistry.mjs
js2. 應用 FlexLayoutNextSplitScreen
FlexLayoutNextSplitScreen 是利用生成的頁面註冊表提供 URL 面板的伺服器渲染的 Next.js 專用包裝器。僅需將接收 URL 基礎面板的 FlexLayoutSplitScreen 樹包裝一次。
3. URL 面板重新整理恢復
指定 persistence 時,僅將可序列化的 metadata(如 URL、screenKey、containerName、navigationTitle、分割結構)儲存到 storage,而不是 ReactElement 本身。如果 restoreOnReload 為 false,則不使用 persistence;如果 syncWithBrowserUrl 為 true,則儲存 pathname + search 的 URL 快照。在返回/前進或重新訪問相同 URL 時,恢復該 URL 的完整 URL 基礎分割狀態,並在重新整理時恢復當前 URL 快照。
4. DragBox 僅傳遞 URL
Next.js 專用的 DragBox 僅接收 URL,而無需直接創建 targetComponent。如果指定 targetComponent,則優先使用舊有方式,該面板將不包括在 persistence 目標中。
5. iframe 是可選的
iframe 的預設值為 false。僅在需要外部 URL 或獨立文檔上下文時,將 iframe 設為 true。iframe 模式不需要 FlexLayoutNextSplitScreen 的頁面註冊,並且也不包括在 persistence 目標中。
服務器頁面將傳遞從 URL 中提取的 params 和 searchParams。然而,分割窗格不是單獨的 Next Router,因此內部 Client Component 的 usePathname、useParams、useSearchParams 將根據瀏覽器的實際 URL 運行。
當前版本