如何在 Reactjs 中使用 Header 页脚

Question

我是 Reactjs（Nextjs）的新手，我想创建文件“页眉”和“页脚”，这样我就可以在所有页面中使用这个文件，所以我想知道我该怎么做，哪个是更好的选择

1. 我应该创建“Layout.js”然后在这个文件中调用 Header
2. 或者我应该在 _app.js 中使用“页眉”和“页脚”（不创建布局文件）

这是我的 layout.js

import React, { Component } from 'react';
import Header from './Header';

class Layout extends Component {
  

    render () {
        const { children } = this.props
        return (
          <div className='layout'>
            <Header />
            {children}
          </div>
        );
      }
    }

或者还有其他方法，我该怎么做，提前谢谢你。

Answer 1

请参阅本文档以了解 NextJs 中的基本布局功能

首先创建 Layout 组件

import Header from './header'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Header/>
      <main>{children}</main>
      <Footer />
    </>
  )
}

在入口文件中导入并使用< Layout >组件，

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      {/* All your page components */}
    </Layout>
  )
}

这会将您的页面组件包装在 Header 和布局中包含的页脚中。

Answer 2

首先创建您的 Header 和页脚，然后如果您使用 React.js go 到 App 并将 header 和页脚放在那里，如下所示：

const App = () => {
 return (
  <>
   <Header />
     // your routes go here 
   <Footer />
  </>
 )
}

对于 Next.js go 到 _app.tsx/jsx 您所有页面的入口点

export default function MyApp({ Component, pageProps }) {
  return (
   <>
    <Header />
    <Component {...pageProps} />
    <Footer />
   </>
  );
}

如果您想制作不同的布局或将该布局隔离在单独的组件中，您可以这样做。