reactjs - How can I pass Apollo data and React Router 4 url params to my components -

i’m using react router v4 , apollo client. have few routes considered private. have these routes in own component. use withrouter() wrap privateroute component route stuff passed down. i’m wrapping in graphql query know user logged in. problem can’t seem both data graphql , route data.

defining route way apollo data, not match :id <route exact path="/people/:id" render={() => <person {...this.props} />} />

and if change route this, params id, no apollo data in props <route {...this.props} exact path="/people/:id" component={person} />

here main route component

const routes = () => (   <router>     <div>       <switch>         <route exact path="/" component={home} />         <route path="/login" component={login} />         <route path="/create-account" component={createuser} />         <privateroutecontainer />       </switch>     </div>   </router> ); 

here privateroute , privateroutecontainer

class privateroute extends component {   render() {     if (this.props.data.loading) {       return <loading />;     } else if (this.props.data.user) {       return (         <div>           <verticalnavfixed />           <article classname="docs-content">             <switch>               <route {...this.props} exact path="/people/:id" component={person} />             </switch>           </article>         </div>       );     }     return <redirect to={{ pathname: '/login', state: { from: this.props.location } }} />;   } }   const privateroutecontainer = graphql(userquery, { options: { fetchpolicy: 'network-only' } })(withrouter(privateroute)); 

one solution combine router props , props of query in react.cloneelement function. in case this:

class privateroute extends component {    render() {      if (this.props.data.loading) {        return <loading />;      } else if (this.props.data.user) {        return (          <div>            <verticalnavfixed />            <article classname="docs-content">              <switch>                <route path="/people/:id" render={(props) => {return react.cloneelement(<person />, {user: this.props.data.user, ...props})}} />              </switch>            </article>          </div>        );      }      return <redirect to={{ pathname: '/login', state: { from: this.props.location } }} />;    }  }      const privateroutecontainer = graphql(userquery, { options: { fetchpolicy: 'network-only' } })(withrouter(privateroute));