我最近开始学习 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>
        );
    }
}