Partial server side rendering with react

partial-server-side.js

import React, { Component, PropTypes } from 'react';
import { Route, IndexRoute, Link } from 'react-router';

const styles = {
  app: {
    display: 'flex',
    justifyContent: 'center',
  },
  sideBar: {
    marginRight: 10,
    border: '2px solid blue',
    borderRadius: 10,
    width: 200,
  },
  content: {
    flex: 1,
  },
};

class ServerSkip extends Component {

  static propTypes = {
    children: PropTypes.element,
    component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  }

  static defaultProps = {
    component: 'div',
  }

  state = { mounted: false };

  componentDidMount() {
    this.setState({ mounted: true }); //eslint-disable-line
  }

  render() {
    const { children, ...otherProps } = this.props;
    return (
      <div ref="container" { ...otherProps }>
        {this.state.mounted && children}
      </div>
    );
  }
}

const App = ({ sideBar, content }) => {
  return (
    <div style={styles.app}>
      <ServerSkip style={styles.sideBar}>
        {sideBar}
      </ServerSkip>
      <div style={styles.content}>
        {content}
      </div>
    </div>
  );
}

App.propTypes = {
  sideBar: PropTypes.element.isRequired,
  content: PropTypes.element.isRequired,
};


const SideBar1 = () => <Link to="page2" >Go To page2</Link>;
const Content1 = () => <div>Content page 1</div>;

const SideBar2 = () => <Link to="page3" >Go To page3</Link>;
const Content2 = () => <div>Content page 2</div>;

const Page3 = () => <div> Page3 without Sidebar </div>;

export default (
  <Route>
    <Route path="/" component={App}>
      <IndexRoute components={{ sideBar: SideBar1, content: Content1 }} />
      <Route path="/page2" components={{ sideBar: SideBar2, content: Content2 }} />
    </Route>
    <Route path="/page3" component={Page3} />
  </Route>
);