Uncaught Ошибка: Инвариантное Нарушение: Недопустимый тип элемента: Объект

Question

Я возиться с react-routerпривязывая к реализации простую маршрутизацию. Я набираю свой код, как написано в их примере (но без imports) https://github.com/rackt/react-router.

И я получаю эту ошибку в браузере:

Uncaught Ошибка: Инвариантное Нарушение: Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.

Вот что я делаю.

Я прилагаю сценарии на странице, 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'))

Это мое 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'));

Что я делаю не так? Почему выдается ошибка? Маршрутизатор - это объект, а не компонент React. Зачем? Я смотрю на этот пример и набираю свой код таким же образом https://github.com/rackt/react-router

Answer 1

Ваш

window.Router = window.ReactRouter;

должно быть

window.Router = window.ReactRouter.Router;

Вы получаете ошибку, потому что вы пытаетесь использовать <Router />, но Router является ссылкой на библиотеку React Router (а не Router составная часть).