React项目接入Laravel搭配Inertia.js 代码分割后无法访问Context API

核心原因 #

Context无法正常访问的核心原因是：使用动态导入实现代码分割时，若未正确配置Inertia的resolve逻辑、或Context Provider的挂载位置不正确，会导致异步加载的页面组件没有被纳入Context的作用域范围。

可行实现方案 #

1. 调整基础配置（通用方案） #

修改app.js代码，将resolve改为支持异步动态导入的写法，同时把全局Context Provider统一包裹在<App>组件外层，保证所有异步加载的页面组件都处于Context作用域内：

import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'
// 引入你自定义的全局Context Provider
import { AppContextProvider } from './src/contexts/AppContext'

createInertiaApp({
    // 改为异步动态导入实现代码分割
    resolve: async name => {
        const pageModule = await import(`./src/screens/${name}`)
        // 取ES模块默认导出的页面组件
        return pageModule.default
    },
    setup({ el, App, props }) {
        render(
            // 全局Context Provider放在此处包裹App组件
            <AppContextProvider>
                <App {...props} />
            </AppContextProvider>,
            el
        )
    },
})

2. 单页面独立Context适配方案 #

如果部分页面需要使用独立的Context，可以在resolve逻辑内针对特定页面包裹对应的Provider：

resolve: async name => {
    const pageModule = await import(`./src/screens/${name}`)
    const PageComponent = pageModule.default

    // 示例：仅给Dashboard页面包裹专属的Context Provider
    if (name === 'Dashboard') {
        return props => (
            <DashboardContextProvider>
                <PageComponent {...props} />
            </DashboardContextProvider>
        )
    }
    return PageComponent
}

注意事项 #

• Inertia本身支持异步的resolve函数，直接添加async关键字即可兼容动态导入语法
• 全局Context Provider不要定义在单个页面组件内部，避免路由切换时Provider重复挂载导致Context状态丢失
• 若使用React 18，将render方法替换为React 18的createRoot写法即可，配置逻辑完全一致

内容的提问来源于stack exchange，提问作者saman gohari