score:1

Accepted answer

in your index.js file

<router history={hashhistory} >
  <route path="/" component={layout} >
    <indexroute component={index} ></indexroute>
    <route path="lesson" name="lesson" component={lesson} ></route>
  </route>
</router>

<route path="/" component={layout} > acts as the parent route and all other routes are its sub-routes. and its using layout component

so even when you change the route, the parent component remains there and the component of new route is passed to the parent component layout as a children, but you're not rendering children in your layout component.

so, in your layout.js file, add this line {this.props.children}, example

return (
  <div>
    <header />
    <container />
    {this.props.children}
  </div>
);

you can re-arrange it to suit your needs, but add {this.props.children} wherever you want to render the child components passed to it.


edit

i think you're complicating things, anyways you could do this

in layout.js, you can pass the children to your container like

<container>
  {this.props.children}
</container>

and in container.js pass the children using same technique

<main>
  {this.props.children}
</main>

and in main.js

render() {
    return (
      <main classname={this.maincontentplaceholder} id="main-content-placeholder">
        <overlay />
        <div classname="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
          {this.props.children}
        </div>
      </main>
    );

remember to use classname prop instead of using class, in react jsx if you want to set class on an element you have to use classname prop instead of class prop


note: i think it would be best if you can place all the visual elements in your layout file, like header, navigation, sidebar, footer and then place this.props.children in a wrapper div, so the content within the wrapper will keep changing as you navigate between different routes., and you can update the header, navigation, aside, etc data, active states using your store.


Related Query

More Query from same tag