What is the best way to hide divs on a specific page in React?

Question

React

There is a react without any whistles, only react-router
And as planned, the main page and 404 page differ from the others in the template:
404 does not have a header and footer, on the main page there should not be a logo in the
header Component (HOC) like this:

// Это основное приложение с роутером и 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>
    );
  }
}

That is, the pages are wrapped in a Content component that looks like this:

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>
    )
  }
}

Actually the question is: how to make a page load without a logo in the header without writing a second HOC?

Answer 1

In the case of HOC something like this:
I would use a component in the page code instead of HOC:

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