Условие рендеринга компонентов на BrowserRouter

Question

Внутри моего App.js у меня есть следующая функция:

render() {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Header />
          <Alerts />
          <Switch>
            <Route exact path="/" component={Landing} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/profile" component={Profile} />
            <Route path="/:folderName" component={Business} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}

Я хочу визуализировать компонент только на первых 4 маршрутах, а не в /: folderName.Я мог бы разместить Заголовок внутри каждого из маршрутов Landing, Registration, Login и Profile, но я чувствую, что должен быть лучший подход.Я также мог бы использовать render = вместо component = примерно так:

<Route exact path="/" render={() => (
                  <Fragment>
                    <Header />
                    <Landing />
                  </Fragment>
                )}
/>

Но есть ли лучший подход?Могу ли я иметь условие для отображения заголовка в?

Спасибо

Answer 1

Комментарий Антонио Пангалло, в котором предлагалось использовать HOC, действительно работал лучше всего.Вот как теперь выглядит мой коммутатор:

render() {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Switch>
            <Route exact path="/" component={withHeaderAndAlerts(Landing)} />
            <Route exact path="/signup" component={withHeaderAndAlerts(Signup)} />
            <Route exact path="/login" component={withHeaderAndAlerts(Login)} />
            <Route exact path="/profile" component={withHeaderAndAlerts(Profile)} />
            <Route path="/:folderName" component={Business} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}

И функция для обертывания компонентов с помощью заголовка и оповещений:

//HOC to wrap component in the Header and Alerts components
function withHeaderAndAlerts(WrappedComponent) {
  class withHeaderAndAlerts extends React.Component {
    render() {
      return (
        <Fragment>
          <Header />
          <Alerts />
          <WrappedComponent />
        </Fragment>
      );
    }
  }

  withHeaderAndAlerts.displayName = `withHeaderAndAlerts(${getDisplayName(WrappedComponent)})`;
  return withHeaderAndAlerts;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || "Component";
}

Спасибо, Антонио!