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

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')
)

原文由 user944513 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

在 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

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

在V4中，没有 Router BrowserRouter - 或 Routes 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

原文由 Michał 发布，翻译遵循 CC BY-SA 3.0 许可协议