如何使用 React 制作条件标题答案

【问题标题】：How can I make conditional Header with React如何使用 React 制作条件标题
【发布时间】：2019-11-12 14:09:05
【问题描述】：

我想逐页制作有条件的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>

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

没有 Switch ，你可以这样做：

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

【讨论】：

这就是它！谢谢！为答案。它适用于您的代码！
嗯....我认为这段代码会造成另一个问题。尽管链接已更改，但标题未呈现。它在“/(something)”中显示标题，如果我使用“/”访问，那么它不会呈现标题。这是 deme 链接acd2ef3d.ngrok.io

【解决方案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

【讨论】：

【解决方案3】：

有很多方法可以做到。

您可以使用 withRouter()，一个高阶组件来包装您的组件。因此，该组件将可以访问 BrowserRouter 道具。
您可以使用 Redux，我们已安装帖子页面/组件，您将 isheader 状态设置为 false。那么你可以使用这个状态来调节 Header 组件。

参考链接：-Hide header on some pages in react-router-dom

另一种方法是用父组件示例包装那些具有标头的路由：

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>
    )

【讨论】：

感谢您的好意！