React:未捕获的不变量冲突:ReactDOM.render(）:无效的组件元素

React : Uncaught Invariant Violation: ReactDOM.render(): Invalid component element

本文关键字：组件 元素 render 无效 冲突 不变量 React ReactDOM      更新时间：2023-09-26

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

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

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

相关文章：