如何使用 React 制作有條件的 Header

Question

我想逐頁制作有條件的Header ，這意味着我不想在Home上顯示Header ，我想在其他頁面上顯示Header 。

我試圖思考如何解決這個問題，但是沒有特殊的方法可以使用react-router-dom 。 當然，這可能只對我來說很難。

無論如何，我無法解決上述問題是一樣的。

因此，這是當前代碼：

<div className="ui container">
  <BrowserRouter>
    <Header />
    <Route exact path="/">
    <Route exact path="/posts">
    <Route exact path="/project">
    <Route exact path="/profile">
  </BrowserRouter>
</div>

我想像這樣修復它：

<div className="ui container">
  <BrowserRouter>
    {() => { 
      if(path !=="/") 
        return <Header />;
      } else {
        return ;
    }}
    <Route exact path="/">
    <Route exact path="/posts">
    <Route exact path="/project">
    <Route exact path="/profile">
  </BrowserRouter>
</div>

Answer 1

沒有 Switch，你可以這樣做：

 <BrowserRouter>
    {window.location.pathname !== "/" ? <Header /> : null}
    <Route exact path="/">
    <Route exact path="/posts">
    <Route exact path="/project">
    <Route exact path="/profile">
  </BrowserRouter>

Answer 2

嘗試使用Switch ：

import { Route, Switch } from 'react-router-dom';

...

<Switch>
      <Route exact path="/" component={null} />
      <Route component={Header} />
<Switch>

...

文檔： https://reacttraining.com/react-router/web/api/Switch

Answer 3

有一些方法可以做到。

• 您可以使用 withRouter()，一個高階組件來包裝您的組件。 因此，該組件將可以訪問 BrowserRouter 道具。

• 您可以使用 Redux，我們安裝了帖子頁面/組件，您將 isheader state 設置為 false。 那么您可以使用此 state 來調節 Header 組件。

參考鏈接：- 在 react-router-dom 的某些頁面上隱藏 header

另一種方法是將具有 header 的路由與父組件示例包裝起來：

const Layout = ({ children }) => (
            <div>
              <Header />
                {children}
            </div>
          )
        const App = ()=> (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Layout>
                      <Route exact path="/posts" component={..}>
                      <Route exact path="/project" component={..}>
                      <Route exact path="/profile" component={..}>
                    </Layout>
                </Switch>
            </BrowserRouter>
    )