CODEWITHSUNDEEP
javascriptreactjsreact-routergatsby
Profer
Profer

Reputation: 643

How to use different Header for the different component in react

This is my main app.js file having all the routes. Now There are two Header components. Now I need to use Header1 with only the MyProfile and Home components and Header2 with Marketing. How can I do that with best approach?

const App = (props) => (
  <Provider store={store}>
    <Layout>
      <Header1 {...props}/>
      <Header2 {...props}/>
      <Router>
        {/*<PrivateRoute path="/app/profile" component={Profile} />*/}   
        <Marketing path="/app" {...props}/>
        <PrivateRoute  path="/app/my-profile" component={MyProfile} location={props.location}/>
        <PrivateRoute  path="/app/home" component={Home} location={props.location}/>
      </Router>
    </Layout>
  </Provider>
)

export default App

Upvotes: 0

Views: 1557

Answers (1)

r3dst0rm
r3dst0rm

Reputation: 1926

A possible solution for your problem could be, to explicitly define which components need to be rendered inside the Route. But I don't think that's the best approach you could take.

<Route path='/app/my-profile' render={ props =>
  <>
    <Header1 {...props} />
    <MyProfile />
  </>
} />

Another solution, I thought of could be to include the header inside the MyProfile component. In my opinion that's the more elegant way to do it. So your App.js would only include Route paths and your components will take care of what they include:

const App = (props) => (
  <Provider store={store}>
    <Layout>
      <Router> 
        <Marketing path="/app" {...props}/>
        <PrivateRoute  path="/app/my-profile" component={MyProfile} location={props.location}/>
        <PrivateRoute  path="/app/home" component={Home} location={props.location}/>
      </Router>
    </Layout>
  </Provider>
)

export default App

And your MyProfile components could look like this:

const MyProfile = (props) => (
  <>
      <Header1 {...props}/>
      <p>This is my profile</p>
  </>
)

export default MyProfile

Upvotes: 1

Related Questions