ReactJS 在无效页面上隐藏标题（404）

Question

我最近开始学习 React，我一直在试图弄清楚当用户试图路由到无效页面/路径时如何隐藏我的标题。我能想到的唯一方法是手动添加到我的每个组件并从我的 App.js 中删除。现在我只是将它们重定向到主页。下面是我的 App 和 Root 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>