Trong Next.js App Router, chỉ cần chỉ định URL để render page.tsx trên máy chủ và thả vào pane mới của FlexLayoutSplitScreen.

v1.0.0

Trang này là đối tượng thử nghiệm cho Server Component.

FlexLayout thông thường sẽ đảm nhận việc bố trí và thay đổi kích thước như trước, trong khi FlexLayoutSplitScreen sẽ đảm nhận việc chia tách động. Điểm vào dành riêng cho Next.js sẽ giải thích url của DragBox thành registry đã tạo và render page.tsx trên máy chủ, sau đó truyền kết quả đến pane chia đôi tương ứng.

1. Tạo Registry

text

Chỉ cần thiết lập đường dẫn ứng dụng và đường dẫn đầu ra ở đầu script của dự án sử dụng. Kết quả tạo ra là registry tĩnh có thể giải thích nhóm route và segment động.

Chỉ cần thiết lập đường dẫn ứng dụng và đường dẫn đầu ra ở đầu script của dự án sử dụng. Kết quả tạo ra là một registry import tĩnh có thể giải thích nhóm route và segment động, và export mặc định là FlexLayoutNextSplitScreen.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. Áp dụng FlexLayoutNextSplitScreen.

FlexLayoutNextSplitScreen. là wrapper dành riêng cho Next.js cung cấp server rendering cho pane URL bằng cách sử dụng registry page đã tạo. Chỉ cần bọc cây FlexLayoutSplitScreen nhận pane dựa trên URL một lần.

tsx

3. Khôi phục làm mới pane URL.

Đối tượng khôi phục chỉ là pane URL Next có thể tạo lại.

Chỉ bao gồm các pane được bọc bởi FlexLayoutNextSplitScreen, DragBox dành riêng cho Next.js có cách thức url, không chỉ định targetComponent trực tiếp và không sử dụng iframe trong snapshot bền vững. Cách thức targetComponent không ngăn cản việc hiển thị bình thường nhưng sẽ bị loại trừ trong đối tượng khôi phục làm mới.

Khi chỉ định persistence, chỉ có metadata có thể tuần tự hóa như URL, screenKey, containerName, navigationTitle, và cấu trúc phân chia được lưu trữ, không phải là ReactElement. Nếu restoreOnReload là false, sẽ không sử dụng persistence, và nếu syncWithBrowserUrl là true, sẽ lưu snapshot theo pathname + search URL. Khi quay lại/tiến tới hoặc truy cập lại cùng một URL, trạng thái phân chia dựa trên URL đó sẽ được khôi phục, và khi làm mới, snapshot của URL hiện tại cũng sẽ được khôi phục.

tsx

4. Chỉ truyền URL cho DragBox

DragBox dành riêng cho Next.js chỉ nhận URL mà không cần tạo targetComponent. Nếu chỉ định targetComponent, phương pháp cũ sẽ được ưu tiên và pane đó sẽ không được đưa vào đối tượng persistence.

tsx

5. iframe là tùy chọn

Giá trị mặc định của iframe là false. Chỉ định iframe là true khi cần URL bên ngoài hoặc ngữ cảnh tài liệu độc lập. Chế độ iframe không cần page registry của FlexLayoutNextSplitScreen và cũng không được đưa vào đối tượng persistence.

tsx

Trang máy chủ sẽ nhận params và searchParams được trích xuất từ URL. Tuy nhiên, pane chia đôi không phải là Next Router riêng biệt, vì vậy usePathname, useParams, useSearchParams của Client Component bên trong sẽ hoạt động dựa trên URL thực tế của trình duyệt.

Phiên bản hiện tại