Javascript 如何在主页的页眉中添加按钮链接，但在其他页面中有所不同？

我需要添加一个按钮的登录和注册在第一页的标题，但它不同于其他页面。我只是react.js的新手，只是了解一些这方面的知识，希望你们中的任何人都能帮助我。如果您需要更多详细信息，请在下面发表评论

这是我的主页：

class Welcome extends Component {

  constructor(props){
    super();
      this.state ={
        appName: 'Event Management System'

      }
  }

  render(){
    return (
        <div className="row small-up-2 medium-up-3 large-up-4">
          <div className="column">
          <h2> Project Description </h2>
            <a href="/login" className="button">Login</a>
            <a href="/SignUp" className="button primary">SignUp</a>
          </div>
        </div>
    );
  }
}

以下是App.js：

class App extends Component {
  constructor(props){
    super();
      this.state ={
        appName: 'Event Management System'
      }
  }
  render(){
    return (
      <div className="off-canvas-wrapper">
        <div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
          <div className="off-canvas-content" data-off-canvas-content>
            <MobileHeader  name={this.state.appName}/>
            <Header name={this.state.appName}/>
            <Routes />
            <hr/>
            <Footer />
          </div>
        </div>
      </div>
    );
  }
}

这里是header.js

class Header extends Component {
  render(){
    return (
      <div className="callout primary" id="Header">
        <div className="row column">
          <h1> {this.props.name} </h1>
        </div>
      </div>
    );
  }
}

我需要的是第一页的内容：

---

在报税表的标题部分，您可以在报税表中填写：

{document.pathname === '/home' ? <button></button> : ""}

编辑：请记住，jsx要求所有内容都包装在一个元素中，因此如果要显示两个按钮，则必须执行两次，或者将两个按钮元素包装在另一个元素中，如div

如果document.pathname等于要在其上显示的页面的路径，则基本上呈现该按钮。如果您使用状态而不是路由器来管理页面，请根据您的情况使用状态。

在此处上载u r代码并共享链接