如何在某些反应组件中隐藏导航栏 [英] How to hide Nav bar in some react components

问题描述

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

任何建议将不胜感激.

这是 Routes.js:

导出默认类路由扩展组件{使成为() {返回 (<开关><路线精确的路径='/*/家'组件={首页}/><路线精确的路径='/*/登录'组件={登录}/><路线精确的路径='/*/配置文件'组件={配置文件}/><路线精确的路径='/'组件={主}/><路线精确的路径='/*/'组件={组织}/></开关>);}}

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

<导航/><路线/>

解决方案

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

1. 将 Nav 移动到 home &仅个人资料.如果您想让 Routes 组件保持不变，这将是有意义的.
2. 构建一个高阶组件来渲染视图带导航.如果您需要渲染的不仅仅是 home & 渲染，这将是最佳选择.顶部带有导航的配置文件.假设您有一个模态需要具有完全相同的 Nav(出于某种原因)，构建 HOC 可能是有意义的
3. 更改您的组件树以反映您需要的结构.如果只有家&profile 需要 Nav，在单独的组件中声明这两个路由可能是有意义的.

I am trying to make a login flow using react. Routes are working as expected. But when I try to introduce nav bar, it is visible on all routes. I want to show nav bar only on selected components (only on profile and home route).

Any suggestions would be appreciated.

This is the 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>

This is the App.js:

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

解决方案

Your Nav component is being rendered in every view because it's located outside your views. There are a couple of options here:

1. Move Nav into home & profile only. This would make sense if you wanted to keep your Routes component the same.
2. Build a higher-order component for rendering a view withNav. This would be the best option if you need to render more than just home & profile with a Nav on top. Let's say you have a modal that needs to have the exact same Nav (for some reason), it may make sense to build an HOC
3. Change your component tree to reflect the structure that you need. If only home & profile need the Nav, it may make sense to declare those two routes in a separate component.

这篇关于如何在某些反应组件中隐藏导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！