加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 未捕获错误:不变违规:元素类型无效:对象

发布时间:2020-12-15 20:12:30 所属栏目:百科 来源:网络整理
导读:我正在修改react-router,试图实现简单的路由.我在他们的例子中写了我的代码(但没有导入) https://github.com/rackt/react-router#whats-it-look-like. 我在浏览器中收到此错误: Uncaught Error: Invariant Violation: Element type is invalid: expected a
我正在修改react-router,试图实现简单的路由.我在他们的例子中写了我的代码(但没有导入) https://github.com/rackt/react-router#whats-it-look-like.

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

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

这就是我的工作.

我在页面上附加脚本,ReactRouter.min.js和我在react- routes.js中的代码.并且还做出反应和反应 – 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","HELLO,me FOO"
            )
        );
    }
});

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

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

解决方法

您的

window.Router = window.ReactRouter;

应该

window.Router = window.ReactRouter.Router;

您收到错误是因为您尝试使用< Router />,但是路由器是对React路由器库(而不是路由器组件)的引用.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读