Javascript 使用React路由器的黄金布局

我试图与一起使用，但我很难弄清楚如何将黄金布局嵌套在我为路由器创建的包装中

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory } from 'react-router'

import OptGrid from './containers/OptGrid';
import About from './components/About';
import NoMatch from './components/NoMatch';

import './index.css';

const App = React.createClass({
  render: function() {
    return (
    <div className='flexbox-parent flex-column'>
        <div className='flexbox-item header'>
            <ul>
            <li><Link to={`/home`} className='menu_item'>Home</Link></li>
            <li><Link to={`/ogrid`} className='menu_item'>OGrid</Link></li>
            </ul>
        </div>
        <div className='flexbox-item fill-area content flexbox-item-grow'>
        {this.props.children}
        </div>
        <div className='flexbox-item footer'>
        &nbsp;
        </div>
    </div>
)}
});

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="/about" component={About} />
      <Route path="/ogrid" component={OptGrid} />
    </Route>
  </Router>
), root)

OptGrid内部（或者我想在其中显示此布局的任何组件），以便可以像处理任何其他组件一样处理它？或者黄金布局是否假定它将位于DOM的顶层，并且只支持在其中嵌套React组件

React.createClass({ })