Children is undefined even though route matches

[ryanmcclure4]

I'm experiencing an issue where I keep getting children = undefined in the parent's props when visiting a child route.

I'm using found with found-relay and I need to be able to visit routes matching /chat and /chat/12345. The following is part of my routing config:

...
{
  path: '/chat',
  Component: ChatView,
  query: graphql`...`,
  render: renderRoute,
  children: [
    { },
    {
      path: '/:threadId',
      Component: ThreadView,
      render: renderRoute
      query: graphql`...`,
    },
  ],
},
...

I am able to visit /chat just fine, and the page renders as expected. However, when I try to visit /chat/12345 I see the graphql request run, and the renderRoute function is called for the child route, however children is null for the parent ChatView component.

Now, if I modify this to use a named child as such:

...
{
  path: '/chat',
  Component: ChatView,
  query: graphql`...`,
  render: renderRoute,
  children: {
    thread: [
      {
        path: '/:threadId',
        Component: ThreadView,
        render: renderRoute
        query: graphql`...`,
      },
    },
  ],
},
...

Then I do see thread in the parent component's props, and child renders successfully.

What's going on here? Why doesn't the first example work?

[taion]

Are you trying to access children inside ChatView or inside renderRoute?

children gets injected in a sort of janky way per

found/src/ElementsRenderer.js

Line 39 in b95e8f5

: React.cloneElement(element, { children });

by default, but this can fail for any number of reasons.

There's also support for the syntax in https://github.com/4Catalyzer/found#render where render can return a function that takes children, like:

render={({ Component }) => children => <Component>{children}</Component>}

But most likely it's something wonky there happening.

[ryanmcclure4]

Yep, I'm trying to access children inside ChatView. Using render as a function that takes children seems to work as long as I pass it with a name other than children:

render = ({ Component }) => children => (
  <Component nestedRoute={children} >
    {children}
  </Component>
);

So it indeed appears as though something jank is happening. Even in the above case, nestedRoute does get passed through, but children is still coming into the parent component as undefined.

What's even more jank, is I have an almost identical case where nestedRoute never shows up in the parent component but children does! The only factor differentiating the two cases is that in the latter I have the component wrapped in connect() from react-redux, so this must be messing things up. Regardless, this only started happening after I recently upgraded all of my packages, so there may just be something else breaking it down the path.

[taion]

Okay, that's bizarre. Is there any other sort of HoC that might be swallowing children?

[ryanmcclure4]

They both use withRouter from found, as well as radium and a custom hoc using the Provider/Consumer api which passes along all props. However, I've tried removing all of these just to see if anything changes, and I still experience the same behavior.

I'll keep digging and try to figure out where things are getting messed up