javascript - How to use Header Footer in Reactjs - Stack Overflow

admin管理员组

文章数量:1425127

I am new in Reactjs(Nextjs), I want to create file "header" and "footer" so i can use this file in all pages,So i want to know how can i do this and which is better option

1. Should i create "Layout.js" and then call Header in this file
2. Or should i use "Header" and "footer" in _app.js (without create layout file)

Here is my 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>
        );
      }
    }

or there is any other way,How can i do this,Thank you in advance.

I am new in Reactjs(Nextjs), I want to create file "header" and "footer" so i can use this file in all pages,So i want to know how can i do this and which is better option

1. Should i create "Layout.js" and then call Header in this file
2. Or should i use "Header" and "footer" in _app.js (without create layout file)

Here is my 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>
        );
      }
    }

or there is any other way,How can i do this,Thank you in advance.

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Aug 26, 2022 at 9:41 user19725334user19725334

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Please refer this documentation for basic layout feature in NextJs

First create Layout ponent

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

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

Import and use the <Layout> ponent in the entry file,

// pages/_app.js

import Layout from '../ponents/layout'

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

This will wrap your page ponents in the Header and Footer included in the Layout.

First create your Header & Footer then if you are using React.js go to App and put header and footer there like below:

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

For Next.js go to _app.tsx/jsx the entry point of all your pages

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

if you want to make different layouts or isolate that layout in a separate ponent you can do so.

本文标签： javascriptHow to use Header Footer in ReactjsStack Overflow