如何让导航栏离开特定页面？反应网络答案

【问题标题】：How to leave navbar out of certain page? React web如何让导航栏离开特定页面？反应网络
【发布时间】：2020-07-31 06:32:08
【问题描述】：

**如何在页面结果 1-5 中不显示导航栏而在所有其他页面中显示它，是否可以在此文件中更改它？ **

  <BrowserRouter>
    <div>
      <Navbar />
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/Aboutus" component={Aboutus} />
        <Route path="/Contactus" component={ContactUs} />



        <Route path="/selecttemplate" component={SelectT} />
        }/>
        }/>
        }/>
      </Switch>
    </div>
    <Route path="/result1" component={Result1} />
    <Route className='FullHeight' path="/result2" component={Result2} />
    <Route className='FullHeight' path="/result3" component={Result3} />
    <Route className='FullHeight' path="/result4" component={Result4} />
    <Route className='FullHeight' path="/result5" component={Result5} />
  </BrowserRouter>
);

} }

【问题讨论】：

您好 Zaina，您需要提供更多详细信息以便我们为您提供帮助。此外，您发布的代码也不正确，因为导航栏需要位于第一个 switch 语句中

标签： javascript html reactjs routing

【解决方案1】：

this.props.location returns currently opened url.

因此您可以检查当前 url 并有条件地呈现 NavBar。如果当前 url 等于您不想显示导航栏的那些 url，则返回 null 否则返回导航栏

<BrowserRouter>
  <div>
     {
       ((this.props.history.location === '/') || (this.props.location === '/Aboutus')
       || (this.props.history.location === '/Contactus') || 
       (this.props.history.location === '/selecttemplate') || 
       (this.props.history.location === '/result1')) ? null : <Navbar />
     }
    <Switch>
     .
     .
     .

【讨论】：