0

I'm trying to create a React app, but I'm having a problem: when I try to load the main page no errors are thrown, but nothing is shown on the page.

The entry point of the app is main.js, which has this in the render method:

React.render((
  <Router history={history}>
    <Route component={RootComponent}>
      <Route path="/page1" component={Page1}></Route>
      <Route path="/page2" component={Page2}></Route>
    </Route>
  </Router>
), document.body);

The render method of RootComponent.js looks like this:

render() {
  return (
    <div className="navContainer">
      <Menu onMenuChange={::this._onMenuChange} ref="slidemenu" alignment="left">
        <MenuItem hash="/page1">Dash Board</MenuItem>
        <MenuItem hash="/page2">Create Deal</MenuItem>
      </Menu>
      <div className={this.state.expand ? 'slidebody' : 'shrinkbody'}>
        <span className="menuIcon" onClick={this.showLeft}>&#9776;</span>
        {this.props.children}
      </div>
    </div>
  );
  }

The rest of the components are simple components. As I mentioned, there are no errors, but the app shows nothing. This is what is actually rendered in the browser:

<body>
  <noscript data-reactid=".0"></noscript>
</body>

I'm using "react": "^0.13.3" and "react-router": "^1.0.0-beta3".

Why is nothing shown on the page? How can I correct this?

Bart Riordan
  • 436
  • 3
  • 8
  • 23
sapy
  • 8,952
  • 7
  • 49
  • 60
  • (Nobody is really going to be able to solve this for you without a working Fiddle/CodePen that includes *all* of the components, as the problem could be in any of them. Also, do try rendering your components outside the router, and see if they throw an error you can see when they're separate.) – XML Oct 01 '15 at 11:06
  • Ok here's the entire code-base https://github.com/sap9433/react-slide-menu . – sapy Oct 06 '15 at 09:25
  • I did a bit of debugging and found Rendering component outside router is working fine . But with the above structure render method of RootComponent is never been called . so the actual issue is RootComponent is not getting rendered . – sapy Oct 08 '15 at 05:58

1 Answers1

0

Add a path to the Route for RootComponent:

React.render((
 <Router path="/" history={history}>
 <Route component={RootComponent}>
  <Route path="/page1" component={Page1}></Route>
  <Route path="/page2" component={Page2}></Route>
</Route>
</Router>
), document.body);
bhattshru
  • 29
  • 3