嘗試在登錄頁面隱藏 header 但沒有成功

Question

我試圖在登錄頁面上隱藏我的 header 組件，如下所示。 但這是行不通的。 請指導我如何做到這一點。 提前致謝！

class App extends Component {
  render() {
    var auth = localStorage.getItem("auth")
    console.log("app ===>", auth)
    return (
      <div className="App">
        <Header />
        <Router>
          <LinkBar />
          <main>
            <Switch>
              <Route path="/home">
                <Protected cmp={Home}></Protected>
              </Route>
              <Route path="/shopping">
                <Protected cmp={Products}></Protected>
              </Route>
              <Route path="/login">
                <Login />
              </Route>
            </Switch>
          </main>
        </Router>
      </div>
    )
  }
}

export default App

Answer 1

理想情況下，這應該適用於 jsx。

 { auth ? <Header auth={auth}></Header> : null }

或者更優雅的方式

 { auth && (<Header auth={auth}></Header>) }

Answer 2

您可以執行以下操作：

function App(){
   return(
    <Router>
      <Switch>
         <Route exact path="/" component={Login} />
         <Route component={DefaultContainer} />
      </Switch>
    </Router>
   );
}


const DefaultContainer = () => (
  <Header />
  <Router>
    <Switch>
      <Route exact path="/home" component={Home} />
      <Route exact path="/shopping" component={Shopping} />
    </Switch>
  </Router>
)