如何隐藏404页面的页眉

Question

<HeaderContainer>
  <Switch>
    <Route exact path='/counters' component={ParentCounterContainer}/>
    <Route exact path='/about' component={AboutContainer} />
    <Route exact path='/' component={HomeContainer}/>
    <Route component={ErrorContainer} />
  </Switch>
</HeaderContainer>

如何在HeaderContainer包装除ErrorContainer以外的所有路由？

Answer 1

只需将404页面组件Route放置在HeaderContainer之外。

<Switch>
  <HeaderContainer>
      <Route exact path='/counters' component={ParentCounterContainer}/>
      <Route exact path='/about' component={AboutContainer} />
      <Route exact path='/' component={HomeContainer}/>
  </HeaderContainer>
  <Route component={ErrorContainer} />
<Switch>

Answer 2

import React from 'react';
import {Route, Redirect} from 'react-router-dom';

const CustomRoute = ({
    component: Component,
    ...rest
}) => (
    <Header />
    <Route {...rest} component={(props) => {return <Component {...props} />}}/>
)

export default CustomRoute;

尝试像这样的自定义路由。 它可能会起作用。

应用路由器

  <Switch>
    <CustomRoute exact path='/counters' component={ParentCounterContainer}/>
    <CustomRoute exact path='/about' component={AboutContainer} />
    <CustomRoute exact path='/' component={HomeContainer}/>
    <Route component={ErrorContainer} />
  </Switch>