javascript - ReactJS 在无效页面上隐藏标题 (404)

Question

我最近开始学习 React，我一直在尝试弄清楚当用户试图路由到无效页面/路径时我将如何隐藏我的 header 。我能想到的唯一方法是手动添加到我的每个组件并从我的 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>