Persistent layouts don't have access to usePage - how to resolve this?

[arondeparon]

I am trying to figure out how I can use a custom app component so that I can inject some global logic into my application, while still being able to access the usePage() hook.

I tried an approach like this:

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props }) {
        render( (
            <MyCustomAppComponent>
                <App {...props} />
            </MyCustomAppComponent>
        ), el)
    },
})

This does work, but it prevents MyApp from accessing usePage(), since we are not within the InertiaApp component.

Using a layout seems to make sense, but I cannot use a layout as a wrapping component if I want it to be persistent across page loads.

How can I fix this in a way that this does become possible?

[Stevemoretz]

Have you tried putting use Page inside MyCustomAppComponent?

[arondeparon]

@Stevemoretz Thanks for the reply. What do you mean by "putting the Page inside..." ?

[reinink]

You can access shared data in your layouts using the usePage() hook. For example:

import { InertiaLink, usePage } from '@inertiajs/inertia-react'

export default function Layout({ children }) {
  const { auth } = usePage().props

  return (
    <main>
      <header>
        <div>You are logged in as: {auth.user.name}</div>
        <nav>
          <InertiaLink href="/">Home</InertiaLink>
          <InertiaLink href="/about">About</InertiaLink>
          <InertiaLink href="/contact">Contact</InertiaLink>
        </nav>
      </header>
      <content>{children}</content>
      <footer></footer>
    </main>
  )
}