CODEWITHSUNDEEP
reactjsreact-router
ceckenrode
ceckenrode

Reputation: 4703

React Router not rendering child components

New to react. Having an issue rendering child components with react router. My App component renders fine. If I swap out App in the parent component for Child1 or Child2, those work as well. But my nested components inside react router don't seem to be rendering. What am I missing?

var App = React.createClass({
  render: function() {
    return <h1 className="red">
      dfdf
      {this.props.children}
    </h1>
  }
});

var Child1 = React.createClass({
  render: function() {
    return (
      <h1>I am a Child</h1>
    )
  }
});

var Child2 = React.createClass({
  render: function() {
    return (
      <h1>I am the other Child</h1>
    )
  }
});

var routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="1" component={Child1} />
      <Route path="2" component={Child2} />
    </Route>
  </Router>
)

ReactDOM.render(routes, document.querySelector('.container'));

Update Okay so I can get this to work with hashHistory, but browserHistory doesn't work. Why is this?

Upvotes: 0

Views: 683

Answers (1)

ceckenrode
ceckenrode

Reputation: 4703

Referring to the answer given in the comment to my question, when using browserHistory you must be serving the files from a * route using express or whatever other server being used. When serving files locally from a development server or a server not configured for this sort of routing you must use hashHistory.

Upvotes: 0

Related Questions