反应警告错误停止编译应用程序

Question

我有以下内容：

• nav.jsx组件:(到目前为止一切正常）

  run3

路线组件如下：

• routes.js

  import React from 'react';
  import Link from 'react-router';
  
  class Nav extends React.Component {
   render () {
    return (
     <ul>
      <li><Link to='/test1'>test1</Link></li>
      <li><Link to='/test2'>test2</Link></li>
     </ul>
    );
   }
  }
  
  export default Nav;
  

和index.jsx这样：

import React from 'react';
import { Route, Router, IndexRoute } from 'react-router';
import ReactDOM from 'react-dom';

import App from './index.jsx';
import Test1 from './test1.jsx';
import Test2 from './test2.jsx';

ReactDOM.render((
<Router>
 <Route path="/" component={App} />
 <Route path="/test1" component={Test1} />
 <Route path="/test2" component={Test2} />
</Router>
), document.getElementById('app'));

但是我在控制台中收到以下错误：

invariant.js：38未捕获的不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。检查import React from 'react'; import {render} from 'react-dom'; import Nav from './nav.jsx'; class App extends React.Component { render () { return ( <div> <Nav /> <p> Hello React!</p> </div> ); } } export default App; 的渲染方法。

一切都很好，直到我添加了“导航”组件......

Answer 1

import {Link} from 'react-router'

上面应该做你的工作。你可以尝试一次吗？

Answer 2

您可以尝试使用以下

另请注意https://github.com/reactjs/react-router/blob/master/docs/Introduction.md

import React from 'react';
import {render} from 'react-dom';

import Nav from './nav.jsx';

class App extends React.Component {
  render () {
    return (
      <div>
        <Nav />
        <p> Hello React!</p>
        {this.props.children}
      </div>
    );
  }
}

export default App;