React nested routing

Question

I'm learning React and am thinking how the hell do I create dynamic route like partial pages in Angular.

Here is my top level App component

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>
    );
  }
}

My Route looks like this:

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')
);

Any idea please ?

derp · Accepted Answer · 2016-11-17 22:25:24Z

2

Does this work?

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;

edited Nov 17, 2016 at 22:25

answered Nov 17, 2016 at 22:18

derp

2,30815 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Philip K. Adetiloye Over a year ago

So doing that, I get this error in the browser ` error 'children' is missing in props validation react/prop-types`

derp Over a year ago

hmm could be eslint throwing an error, answer has been edited

Collectives™ on Stack Overflow

React nested routing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related