如何在某些react组件中隐藏导航栏

IT技术 reactjs react-router-v4
2021-04-29 15:06:56

我正在尝试使用 react 制作登录流程。路由按预期工作。但是当我尝试引入导航栏时，它在所有路线上都可见。我只想在选定的组件上显示导航栏（仅在配置文件和回家路线上）。

任何建议，将不胜感激。

这是 Routes.js： 

export default class Routes extends Component {
  render() {
    return (
      <Switch>
        <Route
          exact
          path='/*/home'
          component={Home}
        />
        <Route
          exact
          path='/*/login'
          component={Login}
        />
        <Route
          exact
          path='/*/profile'
          component={Profile}
        />
        <Route
          exact
          path='/'
          component={Main}
        />
        <Route
          exact
          path='/*/'
          component={Org}
        />
      </Switch>
    );
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是 App.js：

<div className="App">
  <Nav />
  <Routes />
</div>

4个回答

您的Nav组件正在每个视图中呈现，因为它位于您的视图之外。这里有几个选项：

  1. 移动Nav到家庭和唯一的个人资料。如果您想保持Routes组件相同，这将是有意义的。
  2. 构建一个用于渲染视图的高阶组件withNav。如果您需要渲染的不仅仅是带有导航的主页和个人资料，这将是最佳选择。假设您有一个模态需要完全相同Nav（出于某种原因），构建 HOC 可能是有意义的
  3. 更改组件树以反映您需要的结构。如果只有 home 和 profile 需要Nav，那么在单独的组件中声明这两条路由可能是有意义的。

这是解决方案。检查useLocation“react-router-dom”中的钩子

function App() {
  const location = useLocation();

  return (
    <>
      {location.pathname === '/' ? null : <Navbar />}

      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/projects' component={Projects} />
        <Route path='/about' component={About} />
      </Switch>
    </>
  );
}

export default App;

您可以尝试在 css 中隐藏导航栏，并使用 React-Helmet 在特定组件中显示

 <Helmet>
      <style type="text/css">{`
    .navbar {
        display: inline
    }

`}</style>
    </Helmet>

下面的一段代码对我有用

 <style type="text/css">
      {`.navbar {display: none}`}
    </style>
其它你可能感兴趣的问题
上一篇React svg / png 渲染在新 URL 上闪烁 下一篇重定向到新选项卡时通过链接传递状态