reactjs - How to avoid "taking off the child prop" in a container on a route?

Question

I have what seems to be an anti-pattern that I'm using that I'd like to avoid.

I have routes like this:

   <Route path="/" component={internationalise(App)} breadcrumbIgnore>

       <Route path="login" component={Login}/>
       <Route path="signup/:token" component={SignupConfirmation}/>
       {/* (ETC other non-logged in routes) */}

       <Route component={requireAuthentication(LoggedInBase)} breadcrumbIgnore>
           {/* Displaying projects and variations */}       
           <Route component={ProjectRoot} breadcrumbName="Projects">
               <Route path="projects" component={Projects}/>
               <Route path="projects/:projectId" component={Project} breadcrumbName="Project Details">

The intermediate nodes in a given route are containers ... they do stuff like fetching the necessary data from store etc that containers are supposed to do.

The challenge that I have is that in each intermediate container after it does it's stuff, it has to render the children from the route, passing them all that good stuff on the props.

But

render() {
   return(<this.props.children {...this.props}>)
}

doesn't work because at this point the container itself is still the child!

So I find myself doing

render() {
   // (intermediate node render logic, then...)

   const childPage = React.Children.only(this.props.children)

    return(<div> {/* intermediate node rendering, then... */} 
             {React.cloneElement(childPage, {...nonChildProps(this.props)})}
           </div>
    )
}

with

const nonChildProps = (props) => {
    var {children, ...nonChildren} = props
    return nonChildren
}

Which is all quite ugly - I must be doing something wrong.

How can I have intermediate containers on routes in a way that doesn't lead to this problem?

Answer 1

The anti-pattern is passing all props (with a spread) down a tree.

It came from an argument of "my intermediate component doesn't know that components below it need the props that come from a container above. It doesn't even know what components are below it, and that may change." (IE pass through props).

This in turn comes from an efficiency concern about components at different levels all having containers that fetch the same basic data and put it on props. "Get the common data and put it on props as high as possible for efficiency".

I have concluded there must be a better way to handle that problem ... probably time to bring in reselect, which I only just learned about.