未捕获的错误：不变违规：元素类型无效：对象

Posted 2023-02-21

【中文标题】未捕获的错误：不变违规：元素类型无效：对象

【英文标题】：Uncaught Error: Invariant Violation: Element type is invalid: Object

【发布时间】：2016-03-27 01:19:00

【问题描述】：

我正在修改react-router，以实现简单的路由。我按照他们的示例输入我的代码（但没有imports）https://github.com/rackt/react-router#whats-it-look-like。

我在浏览器中收到此错误：

未捕获的错误：不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

这就是我所做的。

我在页面上附加脚本ReactRouter.min.js 和react-routes.js 中的代码。还有react 和react-dom 和jquery（app.js 中的所有三个）：

<script src="/js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
<script src="/js/react-routes.js" type="text/javascript" charset="utf-8"></script>

这是我的react-router.js，尚未编译：

'use strict';
window.Router = window.ReactRouter;
window.Link = window.ReactRouter.Link;
window.Route = window.ReactRouter.Route;

const Foo = React.createClass(
    render() 
        return (
            <div>
                <h1>HELLO, me FOO</h1>
            </div>
        )
    
);

ReactDOM.render((
    <Router>
        <Route path="/" >
            <Route path="/page/one" component=Foo/>
        </Route>
    </Router>
), document.getElementById('content-section'))

这是我用 Babel 编译后的react-router.js。我在页面上附上了这个：

babel --presets react -o public/js/react-routes.js assets/js/react-routes.js:

'use strict';

window.Router = window.ReactRouter;
window.Link = window.ReactRouter.Link;
window.Route = window.ReactRouter.Route;

const Foo = React.createClass(
    displayName: "Foo",

    render() 
        return React.createElement(
            "div",
            null,
            React.createElement(
                "h1",
                null,
                "HELLO, me FOO"
            )
        );
    
);

// Error is thrown here, in this line
ReactDOM.render(React.createElement(
    Router,
    null,
    React.createElement(
        Route,
         path: "/" ,
        React.createElement(Route,  path: "/page/one", component: Foo )
    )
), document.getElementById('content-section'));

我做错了什么？为什么会抛出错误？ Router 是一个对象，而不是 React 组件。为什么？我看这个例子并以同样的方式输入我的代码https://github.com/rackt/react-router#whats-it-look-like

【参考方案1】：

你的

window.Router = window.ReactRouter;

应该是

window.Router = window.ReactRouter.Router;

您收到错误是因为您尝试使用 <Router />，但 Router 是对 React Router 库（而不是 Router 组件）的引用。

【讨论】：

是的，你是对的。但是这个路由器库为我生成了一些疯狂的网址localhost/#/?_k=gt80ji。这太荒谬了。他们的文档中对此一无所知。

@Green 见github.com/rackt/react-router/blob/master/docs/guides/basics/…