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>