Question

我尝试配置react路由器，但遇到了这个奇怪的错误

未捕获错误：元素类型无效：预期字符串..检查主要的渲染方法。

我有我的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

这是我的index.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'));

我认为这可能是由react-router引起的，我不知道。如果我只是做

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

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> ) }：
中取出它
map

未捕获的错误：元素类型无效：期望一个字符串

1 个答案: