Как создать отдельные компоненты верхнего и нижнего колонтитула с помощью реакции?

Question

Я создаю веб-сайт с несколькими компонентами страницы, и я хотел бы создать отдельные компоненты для верхнего и нижнего колонтитула, чтобы мне не нужно было добавлять его на каждую страницу веб-сайта. Я пробовал следовать аналогичным учебным пособиям, но не добился успеха.

Я был бы очень признателен, если бы смог получить некоторое представление о том, что делать с созданием компонентов верхнего и нижнего колонтитула, потому что я пытался импортировать ихв App.js, но безуспешно.

В настоящее время у меня есть:

`import banner from '../img/banner.png';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Image} from 'semantic-ui-react'

class Header extends Component {



    render() {
        return (
            <header>
                <Image src={banner} className="bannerimage" />
            </header>

        );}
}
export default Header;

`

и

import banner from '../img/bottombanner.png';
import { connect } from 'react-redux';
import React, { Component } from 'react';
import { Image } from 'semantic-ui-react'



class Footer extends Component {



    render() {
        return (
            <footer>
                <Image src={banner} className="botbanner" />
            </footer>

)}

}
export default Footer;

HFLayout.js:

///<reference path="navmenu.js" />
import Header from './Header';
import Footer from './Footer';
import React, { Component } from 'react';
import { connect } from 'react-redux';


class HFLayout extends Component {


    render() {
        return (
            <div> <Header /> {this.props.children} <Footer /> </div>
        )
    }
}
export default connect()(HFLayout);

App.js:

    import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import HFLayout from './components/HFLayout';
import Header from './components/Header';
import Footer from './components/Footer';


/* eslint-disable */


 function App(){

    <div>
        <div><h1>  <Header></Header></h1> </div>
        <div> <h1> <Footer></Footer> </h1></div>
    </div>

    return (


        <Router>
            <div>

                <Route path="/header" component={Header} />
                <Route exact path="/footer" component={Footer} />
                <Route exact path="/HFLayout" component={HFLayout} />

            </div>
        </Router> 
    )
}

export default App;