Question

我在实现react-routing时遇到此错误，这是我的代码 http://codepen.io/anon/pen/VmOgyy?editors=1010

错误

react.min.js:16 Uncaught Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at r (react.min.js:16)
    at p.a [as _instantiateReactComponent] (react.min.js:16)
    at performInitialMount (react.min.js:13)
    at p.mountComponent (react.min.js:13)
    at Object.mountComponent (react.min.js:15)
    at i (react.min.js:14)
    at r.perform (react.min.js:16)
    at s (react.min.js:14)
    at r.perform (react.min.js:16)
    at Object.batchedUpdates (react.min.js:14)

你能否告诉我为什么会出现这个错误

var Router = ReactRouter;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var browserHistory = Router.browserHistory;
var RouteHandler = Router.RouteHandler;

class First extends React.Component {
  render() {
    return <h1>Hello word</h1>;
  }
}

class Second extends React.Component {
  render() {
    return <h1>Second</h1>;
  }
}

ReactDOM.render( <Router history={browserHistory}>
        <Route path="/" component={First}/>
    </Router>,document.getElementById('root')
)

Answer 1

切换到非缩小版本的反应后，您将看到实际错误：

未捕获错误：元素类型无效：需要一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：未定义。

之所以会发生这种情况，是因为您使用的ReactRouter v4.0具有不同的API

在第4版中，没有Router或Routes个组件。相反，您使用BrowserRouter和Match个组件。在你的情况下代码看起来像这样：

const {
  BrowserRouter,
  Match,
  Link
} = ReactRouter

class First extends React.Component {
  render() {
    return <h1>Hello word!</h1>;
  }
}

class Second extends React.Component {
  render() {
    return <h1>Second</h1>;
  }
}

ReactDOM.render(
  <BrowserRouter>
    <div>
      <Link to='/'>First</Link>
      <Link to='/second'>Second</Link>
      <Match exactly pattern="/" component={First} />
      <Match pattern="/second" component={Second} />
    </div>
  </BrowserRouter>, document.getElementById('root')
)

react-router v4的文档：https://react-router.now.sh/basic

Answer 2

错误发生是因为模块的development and production environment版本之间存在冲突。您在codepen中使用的react-router实例是development version并包含完整的错误消息。正如React Docs所说的那样

在React的缩小生成版本中，我们避免发送完整的错误消息以减少发送的字节数   电线。

我们强烈建议您在调试时在本地使用开发版本   你的应用程序

要解决此错误，请使用non-minified版本的react和react-dom

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js

和

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js

Answer 3

要解决此错误，您可以使用react和react-dom的非缩小版本

请执行以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Router Bug Report</title>
<script src="https://npmcdn.com/react@0.14.2/dist/react.js" charset="utf-8"></script>
<script src="https://npmcdn.com/react-dom@0.14.2/dist/react-dom.js" charset="utf-8"></script>
<script src="https://npmcdn.com/react-router@2.0.0/umd/ReactRouter.js" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

Jscode----
const {
  Router,
  Route,
IndexRoute,
  Redirect,
  Link,
browserHistory,
IndexLink
} = ReactRouter

class First extends React.Component {
constructor(){
super();
this.state = {
         username: "",
      }
    // click hander
this.handleClick = this.handleClick.bind(this);
this.onChangeHandler = this.onChangeHandler.bind(this);

  }

handleClick(e){
    //alert(this.state.username)

  }
onChangeHandler (e){
    console.log(e.target.value);
this.setState({
username :e.target.value
    })
  }
render() {
    return (
<div>
<h1>First</h1>
<input type="text" onChange={this.onChangeHandler}/>
      {this.state.username}
<Link to="/second" ><button onClick={this.handleClick}>send data</button></Link>
</div>
    );
  }
}
class Second extends React.Component {
render() {
    return (
<h1>Second</h1>
    );
  }
}

ReactDOM.render((
<Router>
<Route path="/" component={First}/>
<Route path="/second" component={Second}/>
</Router>
), document.getElementById('app'))

Answer 4

由于模块的开发和生产环境版本之间存在冲突，因此会发生此错误。您在代码中使用的实例是开发版本，包含完整的错误消息。要解决此错误，您可以使用react和react-dom的非缩小版本

Answer 5

这是因为您使用的是具有不同API的ReactRouter v4.0

将一个组件导航到另一个组件时反应中的Minact React错误

5 个答案: