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

Question

我有以下几点：

nav.jsx 组件：（到目前为止一切正常）

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;  

一个路由组件如下：

routes.js

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")
);

还有一个像这样的 index.jsx：

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;

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

invariant.js:38 Uncaught Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查Nav的渲染方法。

在我添加“导航”组件之前一切正常...

Answer 1

你可以试试下面的

也请看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;

Answer 2

import {Link} from 'react-router'

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