Using Golden-Layout with React Router

Question

I'm trying to use Golden-Layout in conjunction with React Router 2.6.1 but I'm having difficulty figuring out how to nest the Golden-Layout inside the wrapper I've created for use with my router.

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)

Do I need to modify the React example of Golden-Layout to wrap the GoldenLayout with a

React.createClass({ })

inside of OptGrid (or whatever component I want to show this layout inside-of) so that it can be handled like any other component? Or does the Golden-Layout presume that it'll be at the top-level of the DOM, and only really supports nesting React components inside of it?