Javascript 使用React在网页中复制页眉

我已经创建了Home.js来显示主页，其中包含服务作为一个组件。Header.js对于Home和Service都是可重用的。我已成功地将标题导入服务和主页，但当我返回主页时，标题会重复，因为它需要从服务页面中选择一个标题才能在主页中显示。请帮我修一下

Home.js

import React, { Component } from 'react';

//Re-usable components
import Header from '../Common/Header';
import Services from '../Common/Services';
import Portfolio from '../Common/Portfolio';
import Timeline from '../Common/Timeline';
import Team from '../Common/Team';
import Contact from '../Pages/Contact';
import Footer from '../Pages/Footer';
// import Client from '../Common/Client';
import img from '../Common/assets/img/bakingcareer.jpg';


class Home extends Component {
    render() {
        return ( 
            <div>
                <Header
                // Add any props you want to modify the header 
                // title = 'WHENEVER I BAKE. BAKE WITH MY HEART'
                subtitle = "LOVE WITH BAKING"
                buttonText = "CHECK OUT SERVICE"
                link = '/services'
                showButton = { true }
                image = { img }
                />

                <Services / >
                <Portfolio / >
                <Timeline / >
                <Team / > 
                { /* <Client /> */ } 
                <Contact / >
                <Footer / >

            </div>



        )
    }
}

export default Home;

import React，{Component}来自'React'；
//可重用组件
从“../Common/Header”导入标题；
从“../Common/Services”导入服务；
从“../Common/Portfolio”导入投资组合；
从“../Common/Timeline”导入时间线；
从“../Common/Team”导入团队；
从“../Pages/Contact”导入联系人；
从“../Pages/Footer”导入页脚；
//从“../Common/Client”导入客户端；
从“../Common/assets/img/bakingcareer.jpg”导入img；
类Home扩展组件{
render（）{
报税表（
{ /*  */ } 
)
}
}
导出默认主页；

Service.js

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

//Re-usable items
import Footer from '../Pages/Footer';
import Contact from '../Pages/Contact';
import Header from '../Common/Header';
import image from './assets/img/baking.jpeg';


const services = [{
        title: 'Birthday',
        description: 'A cake for small birthday party for your kids or just friends',
        icon: 'fa-shopping-cart'
    },

    {
        title: 'Family outing',
        description: 'A perfect cake for any family picnic over the weekend or school break',
        icon: 'fa-laptop'
    },

    {
        title: 'Daily basis',
        description: 'Enjoy a cupcake or just a dozen of macarons ',
        icon: 'fa-lock'
    }
];

class Services extends Component {
    render() {
        return ( 
                <div>
                {/* Adding the header to the Service page but now in the main page header is duplicated*/}
                <Header 
                    // title = 'DAN BAKERY'
                    subtitle = "ALL ABOUT OUR BEAUTIFUL SERVICES"
                    buttonText = "CHECK OUT PRODUCT"
                    link = "/"
                    showButton ={true}
                    image = {image}
                />    

                {/* display the service  */}
                <section className = "page-section" id="services" >
                    <div className = "container" >
                    <div className = "row" >
                    <div className = "col-lg-12 text-center" >
                        <h2 className = "section-heading text-uppercase" > Services < /h2> 
                        <h3 className = "section-subheading text-muted" > Enjoy our lovely cakes! < /h3> 
                    </div > 
                    </div> 
                    <div className = "row text-center" > 
                    {/* map through the array */}
                    {services.map((service, index) => {
                        return <SingleService {...service }
                        key = { index }
                        />
                    })
                    }
                    </div> 
                    </div > 
                </section>


                </div>






        )
    }
}

export default Services;

import React，{Component}来自'React'；
从“./SingleService”导入SingleService；
//可重复使用的物品
从“../Pages/Footer”导入页脚；
从“../Pages/Contact”导入联系人；
从“../Common/Header”导入标题；
从“/assets/img/baking.jpeg”导入图像；
常数服务=[{
标题：“生日”，
描述：“为孩子或朋友的小型生日派对准备的蛋糕”，
图标：“fa购物车”
},
{
标题:"家庭郊游",，
描述：“这是周末或学校假期家庭野餐的完美蛋糕”，
图标：“fa笔记本电脑”
},
{
标题：“每日基准”，
描述：“享受一个纸杯蛋糕或一打麦卡龙”，
图标：“fa lock”
}
];
类服务扩展组件{
render（）{
报税表（
{/*将标头添加到服务页，但现在在主页标头中重复了*/}
{/*显示服务*/}
服务
享受我们可爱的蛋糕吧！
{/*通过数组映射*/}
{services.map（（服务，索引）=>{
返回
})
}
)
}
}
出口默认服务；

Header.js

import React, { Component } from 'react';
// import HeaderItem from './HeaderItem';
import { Link } from 'react-router-dom';
import '../css/style.css';




class Header extends Component {
    render() {
        return ( 
            <header className = "masthead" style = {{ backgroundImage: 'url("' + this.props.image + '")' } } >
                <div className = "container" >
                <div className = "intro-text" >
                <div className = "intro-lead-in" > { this.props.title } < /div>  
                <div className = "intro-heading  text-uppercase" > { this.props.subtitle } </div>  
                {this.props.showButton &&
                    <Link className = "btn btn-primary btn-xl text-uppercase js-scroll-trigger" to = { this.props.link }>{ this.props.buttonText }</Link>
                }

                </div>  
                </div >  
            </header>
        )
    }
}

export default Header;

import React，{Component}来自'React'；
//从“./HeaderItem”导入HeaderItem；
从'react router dom'导入{Link}；
导入“../css/style.css”；
类头扩展组件{
render（）{
报税表（
{this.props.title}