Default Layouts & Overwriting the Default Layout

Hey Tom,

I was following along and got really stuck on this specific section, due to it being in React vs Vue:

For anyone who gets stuck adding different layouts from the default, you won't be able to follow it step by step using React. Instead, do this:

(PART 1)
export default function Login() { /* The Login page*/}
Login.layout = (page: ReactElement) => <AuthLayout children={page} />

Source: https://inertiajs.com/pages

I spent the afternoon making it work with react.

@inertiajs/react has a type called ResolvedComponent

(alias) type ResolvedComponent = ComponentType<any> & {
    layout?: LayoutComponent | LayoutComponent[] | LayoutFunction;
}
import ResolvedComponent

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

I imported ResolvedComponent and used it to type import.meta.glob in app.tsx and ssr.tsx. I then followed the code provided in the Inertia documentation to add a fallback to a default layout.

/// <reference path="../../adonisrc.ts" />
/// <reference path="../../config/inertia.ts" />

import '../css/app.css'
import { hydrateRoot } from 'react-dom/client'
import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'
import { ReactNode } from 'react'
import GuestLayout from '~/layouts/GuestLayout'

const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS'

createInertiaApp({
  progress: { color: '#5468FF' },

  title: (title) => `${title} - ${appName}`,

  resolve: async (name) => {
    const page = await resolvePageComponent(
      `../pages/${name}.tsx`,
      import.meta.glob<{ default: ResolvedComponent }>('../pages/**/*.tsx')
    )

    page.default.layout =
      page.default.layout || ((page: ReactNode) => <GuestLayout children={page} />)

    return page
  },

  setup({ el, App, props }) {
    hydrateRoot(el, <App {...props} />)
  },
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

import ReactDOMServer from 'react-dom/server'
import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
import GuestLayout from '~/layouts/GuestLayout'
import { ReactNode } from 'react'

export default function render(page: any) {
  return createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: (name) => {
      const pages = import.meta.glob<{ default: ResolvedComponent }>('../pages/**/*.tsx', {
        eager: true,
      })
      const page = pages[`../pages/${name}.tsx`]

      page.default.layout =
        page.default.layout || ((page: ReactNode) => <GuestLayout children={page} />)

      return page
    },
    setup: ({ App, props }) => <App {...props} />,
  })
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

You can apply a layout of your choice to your pages like this:

import { ReactNode } from 'react'
import { RegisterForm } from '~/components/register-form'
import AuthLayout from '~/layouts/AuthLayout'

export default function Register() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm">
        <RegisterForm />
      </div>
    </div>
  )
}

Register.layout = (page: ReactNode) => <AuthLayout children={page} />

  

    

      Copied!