反应路由器不接受组件作为道具答案

【问题标题】：React router not accepting component as prop反应路由器不接受组件作为道具
【发布时间】：2016-08-22 22:43:14
【问题描述】：

我正在关注react redux tutorial，其应用程序文件和主要组件如下所示，但我收到错误消息“Invalid prop component提供给IndexRoute. in IndexRoute”和Uncaught TypeError: Cannot read property 'props' of undefined。

//app file


import React from 'react';

import { render } from 'react-dom';


// Import Components
import Main from './components/Main';
import Single from './components/Single';
import PhotoGrid from './components/PhotoGrid';

// import react router deps
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

const router = (
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={PhotoGrid}></IndexRoute>
      <Route path="/view/:postId" component={Single}></Route>
    </Route>
  </Router>
)

render(router, document.getElementById('root'));

我读到它可能与 cloneComponent 有关，并尝试用{React.cloneElement(this.props.children, {...this.props})} 替换该部分，但无济于事。

//main

import React from 'react';
import { Link } from 'react-router';

const Main = React.createClass({
  render() {
    return (
      <div>
        <h1>
          <Link to="/">Reduxstagram</Link>
        </h1>
        {React.cloneElement(this.props.children, this.props)}
      </div>
    )
  }
});

export default Main;

【问题讨论】：

尝试使用{this.props.children} 而不是{React.cloneElement(this.props.children, this.props)}

标签： javascript reactjs redux react-router react-redux

【解决方案1】：

您显示的代码没有任何问题。根据错误消息，您的PhotoGrid 组件有问题。因为您没有正确渲染 PhotoGrid 组件，所以 react-router 不会将 PhotoGrid 作为 React 组件。检查您的PhotoGrid 文件。为确保安全，只需从源代码复制并粘贴代码即可。

【讨论】：