javascript - React : Uncaught Invariant Violation: ReactDOM. render():无效的组件元素

标签 javascript reactjs

我不明白为什么下面的代码会产生标题中的错误。我检查了类似的问题,但没有发现它们有帮助。

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

import Menu from './pages/Menu';
import BookShelf from './pages/BookShelf';
import BorrowBook from './pages/BorrowBook';

const App = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired
  },
  render() {
    return (
        <Menu />
      );
    }
});

ReactDOM.render((
  <Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
    <Route path="/" component={App}/>
    <Route path="/menu" component={Menu} />
    <Route path="/bookshelf" component={BookShelf} />
    <Route path="/borrowbook/:bookId"  component={BorrowBook} />
  </Router>,
  document.getElementById('app')
));

最佳答案

ReactDOM.render(( // extra parenthesis here
  <Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
    <Route path="/" component={App}/>
    <Route path="/menu" component={Menu} />
    <Route path="/bookshelf" component={BookShelf} />
    <Route path="/borrowbook/:bookId"  component={BorrowBook} />
  </Router>,
  document.getElementById('app')
)); // extra parenthesis here

额外的括号使您实际上传递一个参数而不是两个。

关于javascript - React : Uncaught Invariant Violation: ReactDOM. render():无效的组件元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36266813/

相关文章:

javascript - Jquery - 具有多个类别的图像过滤器

javascript - 如何正确测试 Vuex?

node.js - React + Webpack + Material UI 样式在生产中的突破

javascript - 将子类别映射到父类别

javascript - 在 React 组件中为 this.props.children 添加自定义 Prop

javascript - jquery中的自定义自动完成功能

javascript - 使光标在计时器上透明(0.5)

javascript - 打印您的网页屏幕并发送带有打印图像的电子邮件

javascript - Modal 内的 slider 不起作用 - React + Material UI

javascript - 对象作为 react 子错误无效。找到带键的对象()