CODEWITHSUNDEEP
cssreactjsdynamicreact-routernavbar
john
john

Reputation: 11

Positioning a NavBar in React

I'm a beginner with react so pardon any incorrect terminology used. I'm trying to learn by building out a simple personal portfolio. Is it possible to position a NavBar component underneath of a dynamic Header that changes dependent upon what page you're currently on? I'm looking to have the each page's content flow in the format below:


Desired Output

Desired Output #2


From my understanding, the NavBar component renders the content of each individual page nested inside of itself. I tried to create <Header /> component and pass in props but since all the page components are imported inside of the <NavBar /> component there were some issues. Should I import all of the components into my main <App /> as well as the <NavBar /> component or am I on the wrong path/thinking about this all wrong? Is react-router the best way to go about this or is there another method I could utilize?

I can post code if necessary. Any and all help is appreciated! Thank you for your time.

Upvotes: 1

Views: 115

Answers (1)

GURU MAHESH K
GURU MAHESH K

Reputation: 66

Using react-router is best way for routing. But also In your case what I will do is instead nesting of those components inside the navbar component. I will make it as an adjacent component

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}
         </>
   }
}

And from props of header , navbar component you can get the active component

Upvotes: 1

Related Questions