2017-02-26 44 views
1

虽然改写ES6语法的一些组件我的阵营路由器开始抛出以下错误:阵营路由器3.0.2 + ES6:React.createElement:类型无效

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Navicon`. 

该错误只弹簧,如果我包括<Link>组件我Navicon组件内部,它看起来像这样:

import React from 'react'; 
import Link from 'react-router'; 
import './navicon.css'; 

class Navicon extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <div className='navicon-container' tabIndex='0'> 
     <div className={'dropdown'}> 
      <Link to={'/'}>Hello</Link> 
     </div> 
     </div> 
    ) 
    } 
} 

export default Navicon; 

,其安装我的路由器的组件看起来是这样的:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory, IndexRoute } from 'react-router'; 
import App from './components/App'; 
import Home from './components/Home'; 
import About from './components/About'; 
import './main.css'; 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route component={App}> 
     <Route path='/' component={Home} /> 
     <Route path='/about' component={About} /> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
); 

我正在使用"react-router": "^3.0.2"

有没有人有任何想法可能会跳闸此错误?当我使用React.createClass()时,这个错误从未出现过,所以我感到困惑。

回答

0

嗯,好像是,由于在反应路由器组件出口的语法,一个显然必须使用:

// import Link from react-router <- this doesn't work 
import {Link} from react-router // <- this does 

那个小变化解决了错误。