Inertia.js默认布局无法展示子页面内容问题求助

最近在学习Inertia.js，按照官方文档实现带默认布局的页面。已经写完app.js、Layout组件和Simple页面组件，运行没有报错，但访问页面时布局正常显示，子页面内容却是空白。相关代码如下，附页面预览，求排查思路。

app.js代码 #

import "./bootstrap";
import "../css/app.css";

import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import Layout from "./Layout";
const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
        const page = resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        );

        page.then((module) => {
            module.default.layout = module.default.layout || Layout;
        });

        return page;
    },
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

Layout组件代码 #

import React from "react";
import { Link } from "@inertiajs/inertia-react";

export default function Layout({ children }) {
    return (
        <main>
            <header>
                <Link href="/">Home</Link>
                <Link href="/about">About</Link>
                <Link href="/contact">Contact</Link>
            </header>
            <article>{children}</article>
        </main>
    );
}

Simple页面组件代码 #

import React from "react";

const Simple = ({ user }) => {
    return (
        <>
            <div>
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown printer took a galley
                of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into
                electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                Lorem Ipsum.
            </div>
        </>
    );
};

export default Simple;

页面预览 #

排查思路 #

• 修复resolve函数的异步逻辑：当前用page.then异步设置布局，Inertia可能在布局绑定完成前就渲染页面，改成async/await写法确保布局被正确绑定：

  resolve: async (name) => {
      const module = await resolvePageComponent(
          `./Pages/${name}.jsx`,
          import.meta.glob("./Pages/**/*.jsx")
      );
      module.default.layout = module.default.layout || Layout;
      return module;
  },
  

• 检查页面组件的props：Simple组件接收了user参数，确认后端路由是否传递了有效user数据，或者暂时移除{ user }参数，测试内容是否渲染
• 验证Fragment语法：部分旧版React不支持简写的<>，换成<React.Fragment>尝试
• 排查CSS样式：打开浏览器开发者工具元素面板，查看article标签或子内容是否被CSS隐藏（如display:none、visibility:hidden）
• 确认后端路由配置：确保Laravel路由正确返回Inertia响应，示例：

  Route::get('/', function () {
      return Inertia::render('Simple', [
          'user' => Auth::user() ?? [] // 确保传递有效数据或空对象
      ]);
  });
  

内容的提问来源于stack exchange，提问作者Péter Bura