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

Question

[Wales]

Имеется реакт без всяких свистоперделок, только react-router
И по задумке главная страница и 404 страница отличаются от других шаблоном:
404 не имеет шапки и футера, на главной же в шапке не должно быть лого
На данный момент пошерстив документацию сделал 404ую, используя High Order Component (HOC) примерно таким образом:

// Это основное приложение с роутером и HOC
function i(Page){
   return class HF extends React.Component{
     render(){
       return (
         <Content><Page /></Content>
       );
     }
   };
 }

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Route exact path={'/'} component={i(Home)} />
            <Route exact path={'/contacts'} component={i(Contact)} />
            <Route component={Error} />
          </Switch>

        </div>
      </BrowserRouter>
    );
  }
}

То есть страницы оборачиваются в компонент Content, который выглядит вот так:

export class Content extends React.Component{
  render(){
    return(
      <div>
          <div className="head_panel">
            <div className="logotype">
              <img src={logo}></img>
            </div>
              <Nav />
          </div>
        <div className="main-page">
          {this.props.children}
        </div>
         <div className="footer">
              
            </div>
      </div>
    )
  }
}

Собственно вопрос: как без написания второго HOC сделать прогрузку страницы без логотипа в шапке?

Answer 1

[Антон Спирин]

В случае с HOC как-то так:

<Route exact path={'/contacts'} component={i({ shouldShowLogo: false })(Contact)} />

Я бы вместо HOC использовал компонент в коде страницы:

render() {
  return(
    <PageLayout shouldShowLogo={false}>
      {/* код страницы */}
    </PageLayout>
  );
}

Comments

[Wales]

Т.е. вместо компонента Content описать все сразу в теле App.js ?
Или использовать данную конструкцию для страницы, которую берет роутер (Типа Home, Contacts) ?
Короче говоря сейчас не совсем понял принцип работы

[Антон Спирин]

Wales, нет, писать в теле компонентов Home и Contact.

[Wales]

Антон Спирин, в итоге убрать HOC вместе с функцией i и использовать данный метод для страниц отдельно, я верно понял?
Допустим две страницы я накидал для примера, а так их больше и, получается, в каждую писать полностью контент и для определенных страниц его исключать => увеличение кода. Или я не прав?
И момент с пробросом shoulShowLogo в функцию с HOC не совсем понял.

[Антон Спирин]

Wales, вы видимо ничего не поняли из моего ответа. Не надо на каждой странице писать полностью код компонента Content. В примере в ответе я его переименовал в PageLayout, так как название Content в данном контексте не подходит.
Просто на каждой странице используйте PageLayout. Например Home:

render() {
  return(
    <PageLayout shouldShowLogo={false}>
      {/* код страницы Home */}
    </PageLayout>
  );
}

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

И момент с пробросом shoulShowLogo в функцию с HOC не совсем понял.

const withLayout = layoutProps => WrappedComponent => 
   class WithLayout extends React.Component{
     static displayName = WrappedComponent.displayName ||
       WrappedComponent.name || 'Component';

     render(){
       return (
         <PageLayout {...layoutProps}>
           <WrappedComponent {...this.props} />
         </PageLayout>
       );
     }
   };

[Wales]

Антон Спирин, спасибо, разобрался