nextjs-创建layouts共用UI和独立pages页面
warning:
这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。
// /components/MyLayout.js
import Link from 'next/link';
const MyLayout = ({ children, home }) => (
<div>
<header>
<Link href="/">
<a>{home ? '主页' : '返回主页'}</a>
</Link>
</header>
<main>{children}</main>
</div>
);
export default MyLayout;
// /pages/index.js
import MyLayout from '../components/MyLayout';
const Home = () => (
<MyLayout home>
<h1>欢迎来到主页</h1>
</MyLayout>
);
export default Home;这个例子展示了如何在Next.js中创建一个自定义的布局组件，并在主页中使用它。通过传递home属性，布局组件可以决定显示“主页”还是“返回主页”的链接。这是一个简单的布局共享UI和独立页面的例子。
评论已关闭