Как добавить ссылку на кнопку в заголовке домашней страницы, но отличаться от других?

Question

Мне нужно добавить кнопку входа и зарегистрироваться в шапке первой страницы, но она отличается от других страниц. Я просто новичок, чтобы реагировать. 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>
    );
  }
}

Вот приложение. 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>
    );
  }
}

и вот заголовок. js

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

Что мне нужно, так это на первой странице:

Answer 1

В вашем компоненте заголовка вы можете поместить это в свой возврат:

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

(Редактировать: помните, что jsx требует, чтобы все было упаковано в один элемент, поэтому, если вы показываете 2 кнопки, вы '' Мне придется сделать это дважды или обернуть два элемента кнопки в другой элемент, например, div)

По сути, визуализировать кнопку, ЕСЛИ document.pathname УРАВНИТ путь к странице, на которой вы хотите ее отобразить. Если вы используете состояние для управления страницей, а не маршрутизатором, используйте вместо этого состояние для вашего состояния.