如何隐藏 404 页面的标题答案

【问题标题】：How can I hide header for 404 page如何隐藏 404 页面的标题
【发布时间】：2018-07-27 12:19:02
【问题描述】：

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

如何将除ErrorContainer 之外的所有路由包装在HeaderContainer 中？

【问题讨论】：

ReactJS hide header on invalid page(404)的可能重复
它不是在标题中定义你的死记硬背的一种空闲方式，你应该在那里定义你的导航链接并将你的路线放在你想要显示的地方
如果你使用 redux，你可以使用 redux state

标签： javascript reactjs

【解决方案1】：

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>

【讨论】：

【解决方案2】：

简单地将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>

【讨论】：

那么它将一直显示，因为它不在Switch中。
它仍然无法正常工作。 Header 还在，但是 ErrorContainer 根本不显示