nextjs-创建layouts共用UI和独立pages页面




// /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和独立页面的例子。

nextjs-创建layouts共用UI和独立pages页面

评论已关闭

推荐阅读