gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 11:24:19 38 4
gpt4 key购买 nike

我正在尝试使用 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>

最佳答案

您的 Nav组件正在每个 View 中呈现,因为它位于您的 View 之外。这里有几个选项:

  • 搬家 Nav仅进入主页和个人资料。如果您想保留您的 Routes,这将是有意义的。成分相同。
  • 建一个higher-order component用于渲染 View withNav .如果您需要渲染的不仅仅是带有导航的主页和个人资料,这将是最佳选择。假设您有一个需要完全相同的模态 Nav (出于某种原因),构建 HOC 可能是有意义的
  • 更改组件树以反射(reflect)您需要的结构。如果只有主页和个人资料需要 Nav ,在单独的组件中声明这两条路由可能是有意义的。
  • 关于reactjs - 如何在某些 react 组件中隐藏导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53097610/

    38 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com