在 React 中定位导航栏答案

【问题标题】：Positioning a NavBar in React在 React 中定位导航栏
【发布时间】：2020-12-13 06:43:12
【问题描述】：

我是 react 的初学者，所以请原谅使用的任何不正确的术语。我试图通过建立一个简单的个人投资组合来学习。是否可以将 NavBar 组件定位在动态 Header 的下方，该组件会根据您当前所在的页面而变化？我希望每个页面的内容流采用以下格式：

标题
导航栏
页面内容

Desired Output

Desired Output #2

据我了解，NavBar 组件呈现嵌套在自身内部的每个单独页面的内容。我尝试创建<Header /> 组件并传入道具，但由于所有页面组件都导入到<NavBar /> 组件内部，因此存在一些问题。我应该将所有组件导入我的主要<App /> 以及<NavBar /> 组件，还是我走错了路/考虑这一切都错了？ react-router 是解决此问题的最佳方法还是我可以使用其他方法？

如有必要，我可以发布代码。任何和所有的帮助表示赞赏！感谢您的宝贵时间。

【问题讨论】：

标签： css reactjs dynamic react-router navbar

【解决方案1】：

使用 react-router 是最好的路由方式。但在你的情况下，我要做的是将这些组件嵌套在导航栏组件内。我会把它做成一个相邻的组件

class App extends Component{
state={
     activeHeader:"home"
  }
render(){
  let main_component = null
  switch(this.state.activComp){
    case "Home" : <Home/>
    ....
    }
  return <>
         <header activeComp={this.state.activeComp/>
         <navbar activeComp={this.state.activeComp/>
         {main_component}
         </>
   }
}

并且可以从 header 的 props 、导航栏组件中获取活动组件

【讨论】：