在React中放置NavBar

编程问答 2022-08-15

问题描述

我是个有反应的初学者，请原谅使用的任何错误术语。我试图通过建立简单的个人档案来学习。是否可以将动态标题的NavBar组件放置在下面之下，该组件会根据您当前所在的页面而变化？我希望每个页面的内容流都采用以下格式：


Desired Output

Desired Output #2


据我了解，NavBar组件呈现嵌套在其内部的每个单独页面的内容。我尝试创建<Header />组件并传递属性，但是由于所有页面组件都已导入<NavBar />组件内部，因此存在一些问题。我是否应该将所有组件以及<App />组件都导入到我的主<NavBar />组件中？或者我在错误的路径上/正在思考所有这一切吗？反应路由器是解决此问题的最佳方法，还是我可以利用另一种方法？

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

解决方法

使用react-router是路由的最佳方法。但是，在您的情况下，我将改为在navbar组件内嵌套这些组件。我将其作为相邻组件

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，navbar组件的道具中，您可以获取活动组件

dynamicdynamicdynamicnavbarnavbarreact-routerreactjsreactjsreactjsreactjs