javascript - 如何使用 React 制作条件标题

Question

我想Header逐页制作条件，这意味着我不想Header在Home页面上显示，我想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>

标签： javascriptreactjsreact-router-dom

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>