Unable to set a default layout in React which uses usePage()

[finestgecko]

I'm trying to create a default layout in React.

Here is the code in app.tsx:

createInertiaApp({
  resolve: (name) => {
    return import(`./Pages/${name}`).then(({ default: page }) => {
      if (page.layout === undefined) {
        page.layout = AppLayout
      }
      return page
    })
  },
  setup({ el, App, props }) {
    const root = createRoot(el)
    root.render(<App {...props} />)
  },
})

And this is my layout:

import React from 'react'
import { ISharedData } from '../types'
import { usePage } from '@inertiajs/inertia-react'

export default function AppLayout(children) {
  const {
    props: { user }
  } = usePage<ISharedData>()

  return (
    <div>
      <div className="w-full p-4 bg-blue-500">i am a navbar</div>
      {children}
    </div>
  )
}

With this, I get a bunch of errors in the console and a blank page:

react-dom.development.js:86 Warning: React has detected a change in the order of Hooks called by Inertia. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useMemo                    useMemo
3. useEffect                  useEffect
4. undefined                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Uncaught Error: usePage must be used within the Inertia component
    at exports.usePage (index.js:1:8269)
    at Function.AppLayout [as layout] (AppLayout.tsx:33:17)
    at m (index.js:1:1416)
    at s (index.js:1:1670)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)

The problem doesn't seem to be the layout - I can manually wrap the page in <AppLayout> and it works fine (with the usePage hook).

I would be grateful for any suggestions to fix this.

[finestgecko]

The solution:

• A persistent layout is not a component, it is an ordinary function which returns JSX - as such, hooks cannot be used in it.
• The solution is to move usePage() to a new component and return that component from the layout.

Hopefully this will help someone in the future with the same problem.

[andresgutgon]

I have a question with this. Let's imagine i have this URL setup

/projects
/projects/:id

And I want to display the last 5 visited projects in my Layout > Sidebar

import { ReactNode } from 'react'
import AppLayout from '@/Layouts/AppLayout'
import { usePage } from '@inertiajs/react'
import { PageProps } from '@/types'

function ProjectPage() {
  return (
    <>
      <div className='grid auto-rows-min gap-4 md:grid-cols-3'>
        <div className='bg-muted/50 aspect-video rounded-xl' />
        <div className='bg-muted/50 aspect-video rounded-xl' />
        <div className='bg-muted/50 aspect-video rounded-xl' />
      </div>
      <div className='bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min' />
    </>
  )
}

ProjectPage.layout = function Layout(children: ReactNode) {
  const { project } = usePage<PageProps>().props
  return (
    <AppLayout
      title={project.name}
      children={children}
      breadcrumbs={[{ label: 'Dashboard' }, { label: project.name, href: `/projects/${project.id}`}]}
    />
  )
}

export default ProjectPage

How could I do something like that?