默认布局不显示子级

Question

我最近开始浏览惯性.js 文档，并尝试使用默认布局复制页面：https://inertiajs.com/pages

我的 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" });

布局文件（来自文档）

import React, { useEffect } 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>
    );
}

我没有收到任何错误，当我尝试访问页面时，我看到了正确的布局，但实际的子页面是空白的。有什么提示吗？

这页纸：

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;

我得到的结果： page preview

Answer 1

先试试这个，在页面组件的顶部你需要导入布局。

从“./Layout”导入布局；