Исключение компонента <Header /> на определенной странице с помощью response-router

1- что-то вроде, в Header.js

  import {withRouter} from 'react-router-dom';

        class Header extends Component {
          render() {
            if (this.props.location.pathname === '/') {
              return null
            }
            return (
              // other stuff
            );
          }
        }
  export default withRouter(Header);

Обратите внимание, что withRouter может отличаться в зависимости от версии реагирующего маршрутизатора. Но идея та же: проверьте свой путь с помощью пути ViewerPage и не отображайте заголовок, если это путь ...

2- Другой подход - сделать то же самое с 'redux'

поэтому всякий раз, когда ViewerPage загружается, отправляйте действие. В ViewerPage.js

class ViewerPage extends Component {
          componentDidMount() {
            this.props.updateShouldDisplayHeader(false);
          }
          componentWillUnmount(){
             this.props.updateShouldDisplayHeader(true);
           }
        }

В Header.js

class Header extends Component {
          render() {
            if (!this.props.shouldDisplayHeader) {
               return null;
            }
            return (
              // other stuff
            );
          }
        }

Я полагаю, вы уже знаете, как создавать действия и использовать редукторы на redux

Компонент высшего порядка withRouter, предоставляемый пакетом react-router, предоставит вам доступ к объекту местоположения. Как только вы это сделаете, вы можете условно отобразить заголовок путем короткого замыкания.

import {withRouter} from 'react-router'

const App = ({location}) => (
  <div>
    {location.pathname !== '/exclusion-path' && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

export default withRouter(App)

или исключить по нескольким путям ...

const exclusionArray = [
  '/path-one',
  '/another-path',
]

const App = ({location}) => (
  <div>
    {exclusionArray.indexOf(location.pathname) < 0 && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

Если вы делаете что-то серьезное, я бы порекомендовал использовать контекстный api и сократить значение, предоставленное контекстом. Если это так, и вам нужно какое-то направление, я буду рад вам это объяснить.

P.S. Если вы хотите сделать это с помощью alpha Hooks API, я буду очень взволнован.

Обновлено: для обращения к commont.

Переместите свой маршрутизатор за пределы компонента приложения.

import {BrowserRouter as Router} from 'react-router-dom'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <Router>
    <App/>
  </Router>,
  document.getElementById('render-target')
)

В моем последнем проекте были точно такие же требования, и я решил разделить заголовок на отдельный компонент и использовать фрагменты React. Идиоматический!

import React, { Fragment } from 'react'
// ...

const App = () => (
  <div>
    <Switch>
      <Route path='/no-header-route' component = {NoHeaderComponent} />   // Route without header
      <Fragment>            // This is the key
        <Header/>           // Header is in its own component
        <Route path='/route-1' component = {Comp1}/>  // Route with header
        <Route path='/route-2' component = {Comp2}/>  // Route with header
      </Fragment>
    </Switch>
  </div>
)

В вашем файле маршрутизатора вызовите useRouteMatch () перед <Switch>

export Routes = (
{useRouteMatch("/specific-route")?.isExact ? (
          <Header />
        ) : null}

<Switch>
  <Route path = "other/path" component = {Other}
  ...
</Switch>
);

В качестве альтернативы вызовите withRouter (), чтобы получить прямой доступ к match, location и history.

export const AuthenticatedRoutes = withRouter(() => (
  {location.pathname !== `/special-url` ? (
    <Header />
  ) : null}

  <Route path = "/special-url" component = {Special}
  <Route path = "/other" component = {Other} 
));

export Routes = (
  {useRouteMatch("/specific-route")?.isExact ? (
    <Header />
  ) : null}
            
  <Switch>
    <Route component = {AuthenticatedRoutes}          
  </Switch>
);