React-router example

[johneisenheim]

Hi there! This is a question from a noob. My project structure is the following: routes.js

module.exports = (
    <Router history={browserHistory}>
        <Route path="/" component={Main}>
            <Route path='/inbox' component={Inbox} />
        </Route>
    </Router>
);

Main.js

export default class Main extends React.Component {
    constructor(props, context){
        super(props,context);
        console.log('Main props', props);
        console.log('Main context', props);
    }
    /**
     * componentWillMount() runs on server and client.
     */
    componentWillMount () {
        if (__SERVER__) {
            console.log("Hello server");
        }

        if (__CLIENT__) {
            console.log("Hello client");
        }
    }

    /**
     * Runs on server and client.
     */
    render () {
        return (
                <App/>
        )
    }
}

App.js

class App extends React.Component{

  constructor(props, context) {
    super(props, context);
    console.log('App props ', props);
  }

  render(){
    return (
      <div>
          <Sidebar/>
          <RightContent />
          {this.props.children}
      </div>
    )
  }

}

My attempt is to load <RightContent /> dynamically to a click event generated by <Sidebar/> component, that contains a list of <Link to=".." >. I think the basic problem is that props from Main are not passed through children. Can anyone help me, please? Thank you.