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: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) 但得到了：不明确的。检查 Nav.

的渲染方法

一切正常，直到我添加了“导航”组件...

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;

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

React warning error stops compiling the app

javascript

jsx

reactjs

webpack