如何隱藏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>