React-router: Uncaught TypeError: Cannot read property 'props' of undefined

Created on 19 Sep 2015  路  2Comments  路  Source: ReactTraining/react-router

I'm seeing this issue as well. Here's the stack trace:

Stack Trace

I think it might concern react-router because it starts off from app.jsx:

// app.jsx
var routes = var routes = (
  <Router history={history}>
    <Route path="/" component={App}>
        <Route path="path1/:action" component={Path1} />
        <Route path="path2/:page/:sortBy/:active" component={Path2} />
        <Route path="path3/:page" component={Path3} />
        <Route path="account" component={Account} />
        <Route path="login" component={Login} />
        <Route path="help" component={Help} />

        <Route path="path4/:kind/:status/:sortBy/:page" component={Path4} ignoreScrollBehavior />
    </Route>
    <Redirect from="/" to="/transfer" params={{"action": "new"}} />
  </Router>
);

React.render( // line 31
  routes, document.getElementById("app")
); // line 33

And App.jsx line:

// App.jsx
  render() {
    const loaded = this.state.accountLoaded && this.state.dataLoaded && this.state.dataTypesLoaded;

    console.log("this.props: ", this.props);
    var children = React.cloneElement(this.props.children, this.props.params); // line 95 **problem line**

   // {children} is rendered in the a return a bit later down here

Another stack error here:

Unhandled rejection TypeError: Cannot read property '_currentElement' of null
    at [object Object].ReactCompositeComponentMixin._updateRenderedComponent (node_modules/react/lib/ReactCompositeComponent.js:744:1)
    at [object Object].ReactCompositeComponentMixin._performComponentUpdate (node_modules/react/lib/ReactCompositeComponent.js:726:1)
    at [object Object].ReactCompositeComponentMixin.updateComponent (node_modules/react/lib/ReactCompositeComponent.js:642:1)
    at [object Object].ReactPerf.measure.wrapper [as updateComponent] (node_modules/react/lib/ReactPerf.js:70:1)
    at [object Object].ReactCompositeComponentMixin.receiveComponent (node_modules/react/lib/ReactCompositeComponent.js:506:1)
    at Object.ReactReconciler.receiveComponent (node_modules/react/lib/ReactReconciler.js:97:1)
    at [object Object].ReactCompositeComponentMixin._updateRenderedComponent (node_modules/react/lib/ReactCompositeComponent.js:748:1)
    at [object Object].ReactCompositeComponentMixin._performComponentUpdate (node_modules/react/lib/ReactCompositeComponent.js:726:1)
    at [object Object].ReactCompositeComponentMixin.updateComponent (node_modules/react/lib/ReactCompositeComponent.js:642:1)
    at [object Object].ReactPerf.measure.wrapper [as updateComponent] (node_modules/react/lib/ReactPerf.js:70:1)
    at [object Object].ReactCompositeComponentMixin.receiveComponent (node_modules/react/lib/ReactCompositeComponent.js:506:1)
    at Object.ReactReconciler.receiveComponent (node_modules/react/lib/ReactReconciler.js:97:1)
    at [object Object].ReactCompositeComponentMixin._updateRenderedComponent (node_modules/react/lib/ReactCompositeComponent.js:748:1)
    at [object Object].ReactCompositeComponentMixin._performComponentUpdate (node_modules/react/lib/ReactCompositeComponent.js:726:1)
    at [object Object].ReactCompositeComponentMixin.updateComponent (node_modules/react/lib/ReactCompositeComponent.js:642:1)
    at [object Object].ReactPerf.measure.wrapper [as updateComponent] (node_modules/react/lib/ReactPerf.js:70:1)

Related to #1488

Most helpful comment

Seems like this.props.children is null, because no child routes are matched. You might want to look into IndexRoute or do a check in <App> before using cloneElement.

All 2 comments

Seems like this.props.children is null, because no child routes are matched. You might want to look into IndexRoute or do a check in <App> before using cloneElement.

Thank you, @taurose! That helped greatly.

Was this page helpful?
0 / 5 - 0 ratings