1

我想在 next.js 中创建一个嵌套布局。我还有一个包含组件Header的父布局。Footer我在_app.js文件中使用该布局。

_app.js 文件

import Layout from "../components/Layouts/Layout";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

export default MyApp;

Sidebar.js

import Link from "next/link"
export default function Sidebar() {
    return (
        <div>
            <ul>
                <li><Link href="docs/page1"><a>Page 1</a></Link></li>
                <li><Link href="docs/page2"><a>Page 2</a></Link></li>
                <li><Link href="docs/page3"><a>Page 3</a></Link></li>
                <li><Link href="docs/page4"><a>Page 4</a></Link></li>
                <li><Link href="docs/page5"><a>Page 5</a></Link></li>
            </ul>
        </div>
    )
}

现在我有一个带有组件的文档页面。Sidebar现在我不想Sidebar在每个文档页面上呈现组件。我想创建一个仅在特定路线中呈现的嵌套布局。在我的情况下，嵌套layout应该在/docs路径中呈现。现在我在pages/docs目录中有这样的页面=> 在此处输入图像描述

现在我想要一个包含 parent 的嵌套布局Layout。嵌套布局可能包含一个Sidebar组件。

4

0 回答 0