使用Golden-Layout和React Router

时间:2016-09-30 20:42:42

标签: javascript reactjs golden-layout

我试图将Golden-LayoutReact Router 2.6.1结合使用,但我很难弄清楚如何在我创建的包装中嵌入Golden-Layout用于我的路由器。

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)

我是否需要修改React example of Golden-Layout以使用

包装GoldenLayout
React.createClass({ })

在OptGrid里面(或者我想在里面显示这个布局的任何组件),以便它可以像任何其他组件一样处理?或者Golden-Layout是否假定它位于DOM的顶层,并且只支持在其中嵌套React组件?

0 个答案:

没有答案