How do I pass props into the <Route> of a component passed via a connect()? (Uncaught TypeError: Cannot read property 'children' of undefined)

Question

OS: Windows 10 专业版
反应路由器：4.1.1
反应：15.5.4

如何将道具传递给组件的 <Route>，这些道具是通过 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 - 所以，当我尝试这样做时：

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

我收到 Uncaught TypeError: Cannot read property 'children' of undefined 错误消息。 PhotoGrid.js 中的控制台日志记录 this.props 显示 props 是一个空对象。但是 this.props 按照附图：

完整的错误信息是：

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

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

How do I pass props into the <Route> of a component passed via a connect()? (Uncaught TypeError: Cannot read property 'children' of undefined)

How do I pass props into the <Route> of a component passed via a connect()? (Uncaught TypeError: Cannot read property 'children' of undefined)

reactjs

react-router

react-router-v4

react-router-dom