React-router not displaying component

Question

I\'m currently learning react-router, and then trying to implement it in a sample app.

Here is my code:

index.html

Answer 1

The ugly solution is to get rid of nested routes like so:

module.exports = (
    <Router>
        <Route path="/" component={HelloWorld} />
        <Route path="/about" component={About} />
    </Router>
);

---

Yet, I figured it out the right way to do via this doc

We need another component (which I called Main) that will contain the right component to display (i.e. this.props.children).

I use IndexRoute to define the default component to display.

Here is the corrected code:

/src/components/main.jsx (new)

var React = require('react');

module.exports = React.createClass({
    render: function() {
        return <div>
            // this is where you can add header
            {this.props.children}
            // this is where you can add footer
        </div>
    }
});

/src/routes.jsx (modified)

var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var IndexRoute = require('react-router').IndexRoute;

var Main = require('./components/main');
var HelloWorld = require('./components/hello-world');
var About = require('./components/about');

module.exports = (
    <Router>
        <Route path="/" component={Main}>
            <IndexRoute component={HelloWorld} />
            <Route path="about" component={About} />
        </Route>
    </Router>
);

Answer 2

I have also same prob in my APP I have changed parent and set as same node then it's working may be it may help you

module.exports = (
<Router>
    <Route path="/" component={HelloWorld} />
    <Route path="about" component={About}/> 
</Router>

);