0

How to set Header Fixed for all components and only components should be render in the body section moreover header title also need to show dynamically based on components renders in body section is it possible through Router or from redux

Ramusesan
  • 854
  • 2
  • 11
  • 32

2 Answers2

1

Assume this is your layout.jsx file

render() {
  return(
    <div>
    <Header/>
    <YourRouterHandler>
    </div>
  ) 
}

For your header - create store, and update it according to your currently rendered page. And take its value in your <Header/>

Avdept
  • 2,261
  • 2
  • 26
  • 48
  • this is how am doing but Header component am calling in each page (component) as first header like below render (){ return (
    page 1
    ) I each component am calling Header component as first
     – Ramusesan Mar 02 '17 at 11:01
  • You don't understand, the code i provided above - should be your in your root component, whule Should render current page, so the
    Will never be re-rendered unless you change data in it.     – Avdept Mar 02 '17 at 14:11
  • means my component which has navigation link to another page right – Ramusesan Mar 02 '17 at 16:24
1

This is shown in the first example of the React Router Docs.

You want to wrap all routes in one main, container route usually called App:

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('root'))

Inside the App component you can then make use of this.props.children to show the components based on the route.

class App extends Component {
  render() {
    return (
      <div>
        <HeaderAlwaysShown />
        {this.props.children || <DefaultComponent />}
      </div>
    )
  }
}
Fabian Schultz
  • 18,138
  • 5
  • 49
  • 56
  • bit confusing this code / how {this.props.children || } will render my components inside . where should i configure – Ramusesan Mar 02 '17 at 11:05
  • see this is my code snippet – Ramusesan Mar 02 '17 at 11:06
  • `this.props.children` will be the component that you specify inside your routes. So in this case on `/about` `this.props.children` will be ``. – Fabian Schultz Mar 02 '17 at 11:06
  • ok i understood but how to change the header text based on rendered components dynamically here . i.e in header text should be changed to Home, User etc based on components – Ramusesan Mar 02 '17 at 11:10
  • is it possible pass from reducer store or do u have any other idea – Ramusesan Mar 02 '17 at 11:15
  • Passing from store sounds like a good option. You can also [listen to a route change and put in the content based on that](http://stackoverflow.com/questions/39972785/sync-redux-store-with-react-router-route-location-update-header-on-route-change). If that doesn't work it would probably be best to keep it like you had it and [render the Header in every route](http://stackoverflow.com/questions/40930108/dynamic-react-redux-header-component-in-large-application). – Fabian Schultz Mar 02 '17 at 11:17
  • You can wrap the routes in the redux `Provider`, [see here](http://stackoverflow.com/a/34797666/6941627). – Fabian Schultz Mar 02 '17 at 11:38
  • yup i did wrap the all components inside of provider . my question is assume now header is fixed and components will be update as you suggested return (
    {this.props.children || }
    ) then through Router(react-router) components will update so now if i rendering second page . before to render should i call a action for change header text. if so then when to dispatch an action , and from which components should i do this     – Ramusesan Mar 02 '17 at 11:48
  • Sorry, I'm not a Redux expert. But this seems like a different question anyways, maybe ask a separate question with that specific problem. – Fabian Schultz Mar 02 '17 at 11:54