未捕获错误：不变冲突：元素类型无效：对象

Question

我正在修补react路由器，试图实现简单的路由。我按照他们的示例中所写的方式键入代码（但不包括imports）https://github.com/rackt/react-router#whats-看起来像。

我在浏览器中得到这个错误：

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

这就是我要做的。

我在页面上附加脚本，ReactRouter.min.js和我的代码在react-routes.js。还有react-dom和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路由器。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——预设反应-o public/js/react路由。js assets/js/react路由。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'));

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

Answer 1

你的

window.Router = window.ReactRouter;

应该是

window.Router = window.ReactRouter.Router;

您得到错误是因为您试图使用