diff --git a/packages/react/src/App.ts b/packages/react/src/App.ts index fb2c2a170..46f9aed1e 100755 --- a/packages/react/src/App.ts +++ b/packages/react/src/App.ts @@ -10,7 +10,7 @@ import { import { createElement, FunctionComponent, ReactNode, useEffect, useMemo, useState } from 'react' import HeadContext from './HeadContext' import PageContext from './PageContext' -import { LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types' +import { LayoutComponent, LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types' let currentIsInitialPage = true let routerIsInitialized = false @@ -101,19 +101,22 @@ export default function App({ children || (({ Component, props, key }) => { const child = createElement(Component, { key, ...props }) - - if (typeof Component.layout === 'function') { - return (Component.layout as LayoutFunction)(child) - } - - if (Array.isArray(Component.layout)) { - return (Component.layout as any) - .concat(child) - .reverse() - .reduce((children: any, Layout: any) => createElement(Layout, { children, ...props })) + const layout = Component.layout + if (!layout) return child + + if (typeof layout === 'function') { + try { + return (layout as LayoutFunction)(child) + } catch { + return createElement(layout as LayoutComponent, { ...props, children: child }) + } } - return child + const layouts = Array.isArray(layout) ? layout : [layout] + return layouts.reduceRight( + (acc, Layout) => createElement(Layout as LayoutComponent, { ...props, children: acc }), + child, + ) }) return createElement( diff --git a/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.tsx b/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.tsx index 788ea00c9..ce6cd57d5 100644 --- a/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.tsx +++ b/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.tsx @@ -13,12 +13,6 @@ const PageA = () => { ) } -PageA.layout = (page: React.ReactNode) => { - return ( - - - - ) -} +PageA.layout = [SiteLayout, NestedLayout] export default PageA diff --git a/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.tsx b/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.tsx index c071f8760..c7e5cb902 100644 --- a/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.tsx +++ b/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.tsx @@ -13,12 +13,6 @@ const PageB = () => { ) } -PageB.layout = (page: React.ReactNode) => { - return ( - - - - ) -} +PageB.layout = [SiteLayout, NestedLayout] export default PageB diff --git a/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.tsx b/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.tsx index 6757a0d51..7692038bb 100644 --- a/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.tsx +++ b/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.tsx @@ -12,6 +12,6 @@ const PageA = () => { ) } -PageA.layout = (page: React.ReactNode) => +PageA.layout = SiteLayout export default PageA diff --git a/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.tsx b/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.tsx index a9577c641..be4b29167 100644 --- a/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.tsx +++ b/packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.tsx @@ -12,6 +12,6 @@ const PageB = () => { ) } -PageB.layout = (page: React.ReactNode) => +PageB.layout = SiteLayout export default PageB