ReactJS 在无效页面 (404) 上隐藏标头

Question

我最近开始学习 React，我一直在试图弄清楚当用户试图路由到无效页面/路径时，我将如何隐藏我的标头。我能想到的唯一方法是手动添加到我的每个组件并从我的应用程序中删除.js。现在，我只是将它们重定向到主页。以下是我的应用程序和根JS文件。在我<Redirect to="/" />之前，我使用<Route component={invalidPage}/>链接到InvalidPage组件，但找不到隐藏标题的方法。

//App.js
class App extends React.Component {
    render(){
        return(
            <Router>
                <Root>  
                    <Switch>
                        <Route exact path={"/"} component={Home}/>
                        <Route exact path={"/user"} component={User}/>
                        <Route exact path={"/home"} component={Home}/>      
                        <Redirect to="/"/>
                    </Switch>
                </Root>
            </Router>
        );
    }
}
//Root.js
export class Root extends React.Component{
    render(){
        return(
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header/>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        {this.props.children}
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

使用高阶组件。这种方法应该基本上有效。如果你遇到困难，告诉我。

//App.js
class App extends React.Component {
  render(){
    return(
      <Router>
          <Switch>
            <Route exact path={"/"} component={withRoot(Home)}/>
            <Route exact path={"/user"} component={withRoot(User)}/>
            <Route exact path={"/home"} component={withRoot(Home)}/>
            <Route component={invalidPage}/>
          </Switch>
      </Router>
    );
  }
}
const withRoot= (Component)=> <Root><Component/></Root>