1

I am trying to set up a React Router in Rails for the first time. The links on the router works and changes the hash as expected, but it does not render. I have narrowed down the issue with debugger, and find the following:

  • MyRoutes (line 22, before React creates the router) has props.children.
  • App (line 6, when rendering) does not have props.children.

What is going on?

var Route = ReactRouter.Route,
    Link = ReactRouter.Link;

var App = React.createClass({
  render: function(){
    //line 6
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/todo">Todo</Link></li>
          <li><Link to="/comment">Comment</Link></li>
        </ul>

        {this.props.children}
      </div>
    )
  }
})

$(function(){
  var MyRoutes = (
    <Route path="/" handler={App}>
      <Route path="/todo" name="todo" handler={TodoList} />
      <Route path="/comment" name="comment" handler={Comment} />
    </Route>
  );
  //line 22
  ReactRouter.run(MyRoutes, function (Handler) {
    React.render(<Handler/>, $("#application").get(0));
  });
})
ec88
  • 11
  • 3

1 Answers1

0

I took a look at the react-router-rails repository. Replace this.props.children by <RouteHandler {...this.props}/>. But remember you have to "import" RouteHandler as follows: var RouteHandler = ReactRouter.RouteHandler;. That should solve it.

duacos
  • 69
  • 11