Issue with nested routes (React Router 1.0)

[srph]

I'm using React Router v1.0.3.

---

I'm trying this kind of route hierarchy:

-/ (top-level)
--/ (home page)
--/about (about page)
--/friends (/friends route top-level, fetching of friends)
----/ (friends index; /friends)
----/list (friends list; /friends/list)

_{(to code)}

      <Route path="friends" component={Friends}>
        <Route path="/" component={FriendsIndex} />
        <Route path="list" component={FriendsList} />
      </Route>

Where I am putting the Resolver container on the friends top-level component (Friends).

Here's the stack trace:

Uncaught (in promise) TypeError: Cannot read property 'ref' of undefined
    at cloneWithProps (http://localhost:1111/bundle.js:20673:13)
    at Friends.render (http://localhost:1111/bundle.js:23549:49)
    at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (http://localhost:1111/bundle.js:10462:34)
    at ReactCompositeComponentMixin._renderValidatedComponent (http://localhost:1111/bundle.js:10489:14)
    at ReactPerf.measure.wrapper (http://localhost:1111/bundle.js:16948:21)
    at ReactCompositeComponentMixin.mountComponent (http://localhost:1111/bundle.js:9910:30)
    at ReactPerf.measure.wrapper [as mountComponent] (http://localhost:1111/bundle.js:16948:21)
    at Object.ReactReconciler.mountComponent (http://localhost:1111/bundle.js:17763:35)
    at ReactCompositeComponentMixin._updateRenderedComponent (http://localhost:1111/bundle.js:10437:40)
    at ReactCompositeComponentMixin._performComponentUpdate (http://localhost:1111/bundle.js:10399:10)

Check this repo http://srph.github.io/rrt/#/friends (now https://github.com/srph/playground/tree/master/react/react-resolver-prop-bug)

Not sure what I'm doing wrong haha.

Edit (8/27/2014): Repository transferred to https://github.com/srph/playground/tree/master/react/react-resolver-prop-bug (link to demo)

[ericclemmons]

@srph Check out the example I have in /examples. I'm using the latest React (v0.14) and no container, just normal reactDOM.render(...).

If you can link the repo, that'd be great!

[srph]

I think I did link to the repo.. oh wait.. http://github.com/srph/rrt. Is this the repo you were asking for? :smile:

[ericclemmons]

Ah, that's why:

https://github.com/ericclemmons/react-resolver/blob/v2/examples/react-router/package.json#L15-L17

The example is correct, but the actual project doesn't have that specified dep.

[ericclemmons]

Let's move the convo to #52, cool?

[srph]

I'm a bit confused. Mind clarifying?

Am I supposed to update? I'm using react-resolver 1.x which depends on React 0.13.

[ericclemmons]

Oh! Whoops. My mistake :) Re-opening...

[srph]

Hmm, I'm still investigating at the moment. I removed react-resolver, and it seems that the real issue is with this.props.children.

To clarify. the issue was occuring because this.props.children was blank. I thought this was due to react resolver (although it doesn't make any sense, it was my last lead of the issue). This was primarily because I was doing something wrong with React Router (no default route).

My bad, really. Sorry about this, @ericclemmons!

[srph]

I'm reopening this. It seems that this.props isn't properly passed from the container down to the component.

Check friends/list route. It doesn't override the default component set ({this.props.children || <FriendsIndex />}) in the friends route because it doesn't have any of the original props.

To create a work around, I'll have to do this (cus deadlines):

resolve: {
  children: props => props.children
}

[srph]

Mind confirming if Container.js#L87 leads any clues?

[srph]

Hm.. haha, I feel stupid. Can you verify if the supposed component props are in the parent context (this.context.parent)? Never saw anything in the docs about context so I'm a bit skeptical. Still, I'll check.

Edit: https://github.com/ericclemmons/react-resolver/blob/master/src/Container.js#L75-L79 states that no, original props aren't being passed down. What would be a good API for this?

[ericclemmons]

@srph Sorry, I'm at TXJS right now so a bit out of pocket.

Just so you know. React v0.13 makes context a complete PITA that gets worse when using other context-aware projects like React Router.

For this reason, I'm really focused on bringing over what our live project is using:

https://github.com/ericclemmons/react-resolver/tree/v2/examples/react-router

• React v0.14
• React Router 1.0
• React Resolver v2

[srph]

Alright. Is it available through npm, or do I have to add the dependency through the repository link? I'll still take a look if v2 has solved this issue. I found out that the props aren't being passed over the the component prop or children.

The tests need a bit of refactoring.

Is it alright If I send a PR to fix this issue with v1?

[ericclemmons]

@srph Yep, I'll accept more PRs for v1. I'm merging tons tonight!

[srph]

ALRIGHT! :tada:. Thanks for your work! Will try to send some tonight after work. Busy these days.

Edit: If https://github.com/ericclemmons/react-resolver/issues/56 has already been merged, then I think this issue should be closed now, right? :smile:

[ericclemmons]

Just learned last night that React Router v1.0.0-beta3 has significant server-side rendering bugs. The v2 branch is a bit in flux because context is a PITA in React v0.13, and React Router v0.13.3 is the most stable one we have.

[ericclemmons]

@srph I got tons of examples working in v2 (just launched!) This should be resolved, but feel free to open if it indeed is not.