This release adds a new createInertiaApp()
setup method to make configuring Inertia easier (#698). Here's how to use it:
Before:
import React from 'react'
import { render } from 'react-dom'
import { App } from '@inertiajs/inertia-react'
const el = document.getElementById('app')
render(
<App
initialPage={JSON.parse(el.dataset.page)}
resolveComponent={name => require(`./Pages/${name}`).default}
/>,
el
)
After:
import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props }) {
render(<App {...props} />, el)
},
})
Note that you no longer need to manually return the default
export, as Inertia now handles this automatically.
createInertiaApp({
- resolve: name => require(`./Pages/${name}`).default,
+ resolve: name => require(`./Pages/${name}`),
})
Same goes for if you're using code splitting:
createInertiaApp({
- resolve: name => import(`./Pages/${name}`).then(module => module.default),
+ resolve: name => import(`./Pages/${name}`),
})
By default Inertia uses app
as the root element that your app will boot in. However, you can change this using the id
property:
createInertiaApp({
id: 'my-custom-div',
})