React嵌套路由

Question

我正在學習React，並在想如何創建動態路由 ，就像Angular中的部分頁面一樣。

這裏是我的最高水平App組件

import React from 'react'; 
import Header from '../common/Header'; 

export default class App extends React.Component { 

    render() { 
    return (
     <div> 
     <Header/> 
     //Render partial pages here e.g /dashboard, /users 
     </div> 
    ); 
    } 
} 

我的路線是這樣的：

import React from 'react'; 
import {render} from 'react-dom'; 
import {Router, IndexRoute, Route, browserHistory} from 'react-router'; 
import App from './app/components/containers/App'; 
import Dashboard from './app/components/containers/Dashboard'; 
import Ecosystem from './app/components/ecosystem/Ecosystem'; 

import './assets/plugins/morris/morris.css'; 
import './assets/css/bootstrap.min.css'; 
import './assets/css/core.css'; 
import './assets/css/components.css'; 
import './assets/css/icons.css'; 
import './assets/css/pages.css'; 
import './assets/css/menu.css'; 
import './assets/css/responsive.css'; 

render(
    <Router history={browserHistory}> 

    <Route component={App}> 
     <IndexRoute component={Dashboard}/> 
     <Route path="/ecosystem/:name" component={Ecosystem}/> 
     <Route path="*" component={Dashboard}/> 
    </Route> 
    </Router>, 
    document.getElementById('root') 
); 

任何想法嗎？

Answer 1

這是行不通的？

import React from 'react'; 
import Header from '../common/Header'; 

class App extends React.Component { 

    render() { 
    return (
     <div> 
     <Header/> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

App.propTypes = { 
    children: React.PropTypes.node, 
}; 

export default App;