Comment puis-je passer des accessoires dans le <Route> d'un composant passé via un connect()? (Uncaught TypeError: Ne peut pas lire la propriété 'enfants' de non définie)

Question

OS: Windows 10 Pro
-React routeur: 4.1.1
RÉACTION: 15.5.4

Comment puis-je passer des accessoires dans le <Route> d'un composant, qui ont été transmis au composant via un connect()?

app.js

class MainApp extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 

 
    render() { 
 
    const SOME_PATH = window.location.pathname; 
 
    return (
 
     <ApolloProvider store={store} client={client}> 
 
     <Router history={history}> 
 
      <App> 
 
      <Route path={SOME_PATH} component={Main}/> 
 
      </App> 
 
     </Router> 
 
     </ApolloProvider> 
 
    ) 
 
    } 
 
}

app.js

import Main from './Main'; 
 
import { 
 
    All_Posts_Comments_Query, 
 
} from '../graphql/mutations-queries'; 
 
import { withRouter } from 'react-router-dom'; 
 

 
// Root Query 
 
const allPostsCommentsQuery = graphql(All_Posts_Comments_Query, { 
 
    options: { 
 
    cachePolicy: 'offline-critical', 
 
    fetchPolicy: 'cache-first', 
 
    }, 
 
}); 
 

 
function mapStateToProps(state) { 
 
    return { 
 
    auth: state.auth 
 
    }; 
 
} 
 

 
export const mapDispatchToProps = (dispatch) => { 
 
    return bindActionCreators(actionCreators, dispatch); 
 
} 
 

 
export default withRouter(compose(
 
    allPostsCommentsQuery, 
 
    connect(mapStateToProps, mapDispatchToProps) 
 
)(Main));

main.js - Alors, quand je tente de faire:

render() { 
 
    const props2 = this.props; 
 
    
 
    return (
 
     <div> 
 
     <h1> 
 
      <Link to="/">Flamingo City</Link> 
 
     </h1> 
 
     <Switch> 
 
      <Route path={`${this.props.match.url}`} exact render={() => (
 
      <PhotoGrid {...this.props2.children} {...this.props2} /> 
 
      )} /> 
 
     </Switch> 
 
     </div> 
 
    ); 
 
    }

Je reçois un message d'erreur Uncaught TypeError: Cannot read property 'children' of undefined. Et la consignation de la console this.props dans PhotoGrid.js révèle que les accessoires sont un objet vide. Mais this.props sont aussi par l'image ci-jointe:

Le message d'erreur complet est:

Uncaught TypeError: Cannot read property 'children' of undefined 
 
    at render (http://localhost:7770/static/0.4bcdfe2e54a9396a2ff8.hot-update.js:135:99) 
 
    at Route.render (http://localhost:7770/static/bundle.js:79207:13) 
 
    at http://localhost:7770/static/bundle.js:127491:21 
 
    at measureLifeCyclePerf (http://localhost:7770/static/bundle.js:126770:12) 
 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:7770/static/bundle.js:127490:25) 
 
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:7770/static/bundle.js:127517:32) 
 
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127441:36) 
 
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10) 
 
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12) 
 
    at ReactCompositeComponentWrapper.receiveComponent (http://localhost:7770/static/bundle.js:127242:10) 
 
    at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22) 
 
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127449:23) 
 
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10) 
 
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12) 
 
    at ReactCompositeComponentWrapper.receiveComponent (http://localhost:7770/static/bundle.js:127242:10) 
 
    at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22) 
 
    at Object.updateChildren (http://localhost:7770/static/bundle.js:126609:25) 
 
    at ReactDOMComponent._reconcilerUpdateChildren (http://localhost:7770/static/bundle.js:131411:32) 
 
    at ReactDOMComponent._updateChildren (http://localhost:7770/static/bundle.js:131515:31) 
 
    at ReactDOMComponent.updateChildren (http://localhost:7770/static/bundle.js:131502:12) 
 
    at ReactDOMComponent._updateDOMChildren (http://localhost:7770/static/bundle.js:128656:12) 
 
    at ReactDOMComponent.updateComponent (http://localhost:7770/static/bundle.js:128474:10) 
 
    at ReactDOMComponent.receiveComponent (http://localhost:7770/static/bundle.js:128436:10) 
 
    at Object.receiveComponent (http://localhost:7770/static/bundle.js:16906:22) 
 
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:7770/static/bundle.js:127449:23) 
 
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:7770/static/bundle.js:127419:10) 
 
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:7770/static/bundle.js:127340:12) 
 
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (http://localhost:7770/static/bundle.js:127256:12) 
 
    at Object.performUpdateIfNecessary (http://localhost:7770/static/bundle.js:16938:22) 
 
    at runBatchedUpdates (http://localhost:7770/static/bundle.js:9264:21) 
 
    at ReactReconcileTransaction.perform (http://localhost:7770/static/bundle.js:27133:20) 
 
    at ReactUpdatesFlushTransaction.perform (http://localhost:7770/static/bundle.js:27133:20) 
 
    at ReactUpdatesFlushTransaction.perform (http://localhost:7770/static/bundle.js:9203:32) 
 
    at Object.flushBatchedUpdates (http://localhost:7770/static/bundle.js:9286:19) 
 
    at ReactDefaultBatchingStrategyTransaction.closeAll (http://localhost:7770/static/bundle.js:27199:25) 
 
    at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:7770/static/bundle.js:27146:16) 
 
    at Object.batchedUpdates (http://localhost:7770/static/bundle.js:130702:26) 
 
    at Object.enqueueUpdate (http://localhost:7770/static/bundle.js:9314:22) 
 
    at enqueueUpdate (http://localhost:7770/static/bundle.js:54187:16) 
 
    at Object.enqueueForceUpdate (http://localhost:7770/static/bundle.js:54320:5) 
 
    at Main.ReactComponent.forceUpdate (http://localhost:7770/static/bundle.js:57479:16) 
 
    at forceUpdateIfPending (http://localhost:7770/static/bundle.js:124887:43) 
 
    at traverseRenderedChildren (http://localhost:7770/static/bundle.js:124865:3) 
 
    at http://localhost:7770/static/bundle.js:124895:5 
 
    at Array.forEach (native) 
 
    at http://localhost:7770/static/bundle.js:14321:28 
 
    at wrapped (http://localhost:7770/static/bundle.js:103419:29)

Answer 1

Essayez de changer <PhotoGrid {...this.props2.children} {...this.props2} />-<PhotoGrid {...props2.children} {...props2} />