不明なエラー：要素の型が無効です：私は設定しようと文字列

Question

は、ルータを反応させるの予想が、私はこれが私の指標である私のMain.js

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

const Main = (props) => { 
    return (
    <div> 
     <h1> 
     <Link to="/">Reduxstagram</Link> 
     </h1> 
     {React.createElement(props.children, props)} 
    </div> 
) 
} 

export default Main 

を持っているこの奇妙なエラー

Uncaught Error: Element type is invalid: expected a string.. check render method of Main.

を得ました。 js

import Main from './components/Main' 
import Single from './components/Single' 
import PhotoGrid from './components/PhotoGrid' 

//routes 
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')); 

私はそれが反応ルータによって引き起こすかもしれないと思う、私は知らない。私が単純にすれば

render(<Main>hi</Main>, document.getElementById('root')); 

私はそれが動作することがわかります。奇妙な。

Answer 1

returnがmain.jsの場合は{props.children}を使用することができます。React.createElementは不要です。

const Main = (props) => { 
    return (
    <div> 
     <h1> 
     <Link to="/">Reduxstagram</Link> 
     </h1> 
     {props.children} 
    </div> 
) 
} 

EDIT：
あなたのコメントへのフォロー、あなたはルートを経由して小道具を渡したい場合：

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

そしてrouteから引き出し：

const Main = (props) => { 
    return (
    <div> 
     <h1> 
     <Link to="/">Reduxstagram</Link> 
     </h1> 
     {props.route.myProp} 
    </div> 
) 
}