如何将props传递到通过connect（）传递的组件的<route>？ （未捕获的TypeError：无法读取属性＆＃39;未定义的子项）

Question

操作系统：Windows 10 Pro
React-router：4.1.1
反应：15.5.4

如何将props传递到组件的<Route>，组件通过connect（）传递给组件？

app.js

＆＃13;

＆＃13;

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>
    )
  }
}

＆＃13;

＆＃13;

＆＃13;

App.js

＆＃13;

＆＃13;

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));

＆＃13;

＆＃13;

＆＃13;

Main.js - 所以，当我尝试做的时候：

＆＃13;

＆＃13;

  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>
    );
  }

＆＃13;

＆＃13;

＆＃13;

我收到Uncaught TypeError: Cannot read property 'children' of undefined错误消息。而控制台在PhotoGrid.js中记录this.props会发现道具是一个空对象。但是this.props是附图：

完整的错误消息是：

＆＃13;

＆＃13;

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)

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试将<PhotoGrid {...this.props2.children} {...this.props2} />更改为<PhotoGrid {...props2.children} {...props2} />