Edit in JSFiddle

const Router = ReactRouterDOM.BrowserRouter;
const Switch = ReactRouterDOM.Switch;
const Route = ReactRouterDOM.Route;
const Redirect = ReactRouterDOM.Redirect;

const Link = ReactRouterDOM.Link;
const NavLink = ReactRouterDOM.NavLink;

// トップページ
const Home = () => (
  <div>
    <h2>Home</h2>
    <p><code>react-router-dom v4.x</code> の超てきとうなサンプル。</p>
    <h3>おしらせ</h3>
    <DummyText />
  </div>
);

// 概要ページ
const About = () => (
  <div>
    <h2>About</h2>
    <DummyText />
  </div>
);

// 日記的なページ
const Diary = ({ match }) => (
  <div>
    <h2>Diary</h2>
    <ul>
      <li>
        <NavLink to={`${match.url}/sep`}
          activeClassName="selected">
          9月の日記
        </NavLink>
      </li>
      <li>
        <NavLink to={`${match.url}/aug`}
          activeClassName="selected">
          8月の日記
        </NavLink>
      </li>
    </ul>
    <Route path={`${match.url}/:id`}
      component={DiarySub} />
    <Route exact path={match.url}
      render={() => (
        <div>日付を選んでください。</div>
      )} />
  </div>
);

const DiarySub = ({ match }) => (
  match.params.id === 'sep' ?
    <September /> : <August />
);

const August = () => (
  <div>
    <div><strong>8.31</strong></div>
    <div>なつやすみ、終わってみれば、あっという間のひとやすみ。</div>
  </div>
);

const September = () => (
  <div>
    <div><strong>9.30</strong></div>
    <div>きょうは何もないすばらしい1日だった。</div>
  </div>
);

// なんかよく分からない欧文のテキスト（ダミー用）
const DummyText = () => (
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
);

// レイアウト用のコンテナ
const MainCol = () => (
  <div className="maincol">
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/diary" component={Diary} />
      <Redirect to="/" />
    </Switch>
  </div>
);

const Sidebar = () => (
  <div className="sidebar">
    <h4>Menu</h4>
    <ul className="list">
      <li>
        <NavLink exact to="/"
          activeClassName="selected">
          Home
      </NavLink>
      </li>
      <li>
        <NavLink to="/about"
          activeClassName="selected">
          About
        </NavLink>
      </li>
      <li>
        <NavLink to="/diary"
          activeClassName="selected">
          Diary
        </NavLink>
      </li>
    </ul>
  </div>
);

const App = () => (
  <div className="main-container">
    <Sidebar />
    <MainCol />
  </div>
);

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('container')
);

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<main id="container"></main>

html * {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main {}
.selected {
  font-weight: bold;
}
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-container {   
  display: flex;
  padding: 0 0 40px 0;
 }
 .sidebar {
   flex: 0 0 100px;
   margin: 0 20px 0 20px;
   padding: 0 0 30px 0;
}
.maincol {
  flex: 1 1 auto;
  margin: 0 20px 0 0;
  padding: 0 0 30px 0;
}