未捕获的不变违规：ReactDOM.render()：无效的组件元素

Question

我正在尝试使用 React 路由器实现一个导航示例，但遇到了错误。请找到代码

    app.js
    -------

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Routes from './routes';

    ReactDOM.render(Routes, document.getElementById('react-container'));

    routes.js
    ---------

    import { React,Component } from 'react';
    import { DefaultRoute, Link, Route, RouteHandler,Router } from 'react-router';
    import Page1 from './page1';
    import Home from './home';

    export default class Routes extends Component {

        constructor() {
        super();
      } 

      render() {
        return (
                <Router >
                    <Route path="/" component={Home}>
                        <Route name="page1" path="/1" component={ Page1 }/>
                    </Route>
                </Router>
        );
      }
    }

    home.js
    -------

    import React, { Component } from 'react';

    export default class Home extends Component {

        constructor() {
        super();
      } 

      render() {
        return (
            <div>
              <Header />
              {this.props.children}
          </div>
        );
      }
    }

    page1.js
    --------

    import React, { Component } from 'react';

    export default class Page1 extends Component {

        constructor() {
        super();
      } 

      render() {
        return (
            <div>
              <h1> Page 1 </h1>
          </div>
        );
      }
    }

我有 babel 转换器可以将 es6 转换为 es5，但在加载应用程序时出现以下错误，

    Uncaught Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

谁能帮我解决这个问题？

Answer 1

问题出在您的 routes.js 上。您将路由包装在一个组件中，然后将其传递给 ReactDOM.render。您应该直接传递 jsx。我的建议是从你的 class 中解包路由，然后只导出 jsx。

routes.js
---------

import React from 'react'
import { Router, Route } from 'react-router'
import Page1 from './page1'
import Home from './home'

let routes = 
  <Router>
    <Route path="/" component={Home}>
      <Route name="page1" path="/1" component={Page1}/>
    </Route>
  </Router>

export default routes

错误提示您传递的是 class，而不是调用 React.createElement。请记住：

let someElement = <div>Hello</div>

会变成这样：

var someElement = React.createElement(
  "div",
  null,
  "Hello"
)

未捕获的不变违规：ReactDOM.render()：无效的组件元素

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

reactjs

react-router